如何解决我们可以将业务登录放入故事书吗?
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 异步搜索编写故事书。由于后端 api 尚未准备好,我仅使用公共 api https://api.github.com/search/users
进行演示。但是,isLoading、options 和 handleSearch 应该作为道具传递给 AsyncSearch 这个故事。我应该模拟 API 结果而不是将以下代码直接放入故事书中吗?根据我的理解,storybook 是为独立组件构建的。
const SEARCH_URI = 'https://api.github.com/search/users';
const [isLoading,}));
setoptions(options);
setIsLoading(false);
});
};
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。