如何在api调用reactjs时设置加载？
如何在api调用reactjs时设置加载？
提问于 2021-06-22 15:17:39
由于某些原因，当我使用此方法从loading API获取时，状态不会改变。
如何显示“装载.”当电话在运行的时候。
- async-await也不起作用，这就是为什么我使用这个方法来获取.
const [product, setProduct] = useState({});
const [loading, setLoading] = useState(false);
const productId = 1;
const fetchProduct = () => {
setLoading(true);
//here commerce is my api, so i fetched the product details and set it to the product state
commerce.products.retrieve(productId).then(data => setProduct(data));
setLoading(false);
}
useEffect(() => {
fetchProduct();
})
if (loading) {
return (
<span>Loading...</span>
)
}
return (
<h1>{product.name}</h1>
)回答 4
Stack Overflow用户
回答已采纳
发布于 2021-06-22 15:22:53
在回收产品之后，您必须在承诺结果中设置完整的状态。
const fetchProduct = () => {
setLoading(true);
commerce.products.retrieve(productId)
.then(data => {
setProduct(data)
//HERE
setLoading(false);
});
}Stack Overflow用户
发布于 2021-06-22 15:25:19
我认为有两种方法可以与您的代码相对应。
首先，这个：
const [isLoading, setIsLoading] = useState(false);
const handleFetch = () => {
setIsLoading(true);
someApiCall().then((r) => {
setIsLoading(false);
});
};或
const [isLoading, setIsLoading] = useState(false);
const handleFetch = async () => {
setIsLoading(true);
await someApiCall();
setIsLoading(false);
};Stack Overflow用户
发布于 2021-06-22 15:22:26
忘记loading吧。
您可以从product的值推断数据是否正在加载。
const Component = () => {
const [product, setProduct] = useState(null);
useEffect(() => {
const getProducts = async () => {
const data = await commerce.products.retrieve(productId)
setProduct(data);
};
getProducts();
}, []);
if (product === null) {
return <span>Loading...</span>;
}
return <h1>{product.name}</h1>;
}如果您真的想使用一个单独的加载变量，那么您将让它默认到true，并在给product赋值的同时将它设置为false。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68086283
复制相关文章
相似问题
腾讯云开发者
