我试图在仅获取数据时显示加载程序，而不是在登陆页面和获取数据时首先显示它......有什么想法吗？
这就是我目前正在做的
const handleSearchClick = async () => {
setItems([]);
setIsActive(true);
const { data: { items } } = await fetchData(
`${process.env.REACT_APP_URL}${page}`,
);
items.length && setIsActive(false);
setPage(1);
setItems(items);
};
<container>
<SearchBarContainer>
<SearchBar
onClickButton={handleSearchClick}
onValueChange={handleChange}
value={value}
pageNum={page}
/>
</SearchBarContainer>
{!isActive ? (/*Display data*/) :
(
<LoaderContainer>
<RingLoader size={100} />
</LoaderContainer>
)}
</container>
您需要在获取数据之前和之后设置加载状态。
const App = props => {
const [loading, setLoading] = useState(false);
const [items, setItems] = useState([]);
const handleSearchClick = async () => {
setLoading(true);
try {
const { data: { items: newItems } } = await fetchData(
`${process.env.REACT_APP_URL}${page}`,
);
setItems(newItems);
} catch(e) {
console.log('Error', e);
} finally {
setLoading(false);
}
};
return (
<container>
<SearchBarContainer>
<SearchBar
onClickButton={handleSearchClick}
onValueChange={handleChange}
value={value}
pageNum={page}
/>
</SearchBarContainer>
{loading ? (
<LoaderContainer>
<RingLoader size={100} />
</LoaderContainer>
) : (
<div>Your data</div>
);
}
</container>
);
}本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句