0 
export const AsyncSearch = (args) => {
  const SEARCH_URI = 'https://api.github.com/search/users';
  const [isLoading, setIsLoading] = useState(false);
  const [options, setOptions] = useState([]);
  const handleSearch = (query) => {
    setIsLoading(true);
    fetch(`${SEARCH_URI}?q=${query}+in:login&page=1&per_page=10`)
      .then((resp) => resp.json())
      .then(({ items }) => {
        const options = items.map((i) => ({
          avatar_url: i.avatar_url,
          id: i.id,
          login: i.login,
        }));

        setOptions(options);
        setIsLoading(false);
      });
  };
  return (
    <TypeaheadAdvancedSearch
      options={options}
      handleSearch={handleSearch}
      isLoading={isLoading}
      {...args}
    />
  );
};
AsyncSearch.args = {
  id: 'async-advance-search',
  isAsync: true,
  labelKey: 'login',
  searchText: 'Searching...',
  filterBy: () => true,
};

我正在为 Typeahead Async Search 写一本故事书。由于后端 api 还没有准备好，我只是使用公共 apihttps://api.github.com/search/users进行演示。但是，isLoading、options 和 handleSearch 应该作为道具传递给 AsyncSearch 这个故事。我应该模拟 API 结果而不是直接将以下代码放入故事书中吗？据我了解，故事书是为独立组件构建的。

const SEARCH_URI = 'https://api.github.com/search/users';
  const [isLoading, setIsLoading] = useState(false);
  const [options, setOptions] = useState([]);
  const handleSearch = (query) => {
    setIsLoading(true);
    fetch(`${SEARCH_URI}?q=${query}+in:login&page=1&per_page=10`)
      .then((resp) => resp.json())
      .then(({ items }) => {
        const options = items.map((i) => ({
          avatar_url: i.avatar_url,
          id: i.id,
          login: i.login,
        }));

        setOptions(options);
        setIsLoading(false);
      });
  };
4

0 回答 0