useEffect中如何设定loading状态

Question

想在检索的开始设定loading状态，检索之后取消loading状态
像下面这样并不能很好的工作
请问有什么办法可以设定loading状态啊
const [isloading, setLoading] = useState(false)
useEffect(() => {
    setLoading(true)
    saga请求
    setLoading(false)
}, [queryCondition];
     

Answer 1

茵风泳月 2019-09-10 20:08:01

同学你好，你这段代码的最大问题是并行请求不能同步，导致 loading 状态失准，我给出一种思路：

const [isloading, setLoading] = useState(false);
const [loadingInstanceCount, setLoadingInstanceCount] = useState(0);
useEffect(() => {
    setLoadingInstanceCount(count => count + 1);
//    saga请求
    setLoadingInstanceCount(count => count - 1);
}, [queryCondition];

useEffect(() => {
    setLoading(loadingInstanceCount > 0);
}, [loadingInstanceCount]);

祝您学习愉快！