怎么解决React useEffect 执行顺序导致设置 loading 状态错误的问题？-灵析社区

下面的代码，如果 count 连续发生两次变化，那么 loading 的状态就会被错误的提前设置为 false，怎么解决这个问题？ useEffect(() => { console.log("set loading: true"); setLoading(true); const ac = new AbortController(); new Promise((resolve, reject) => { const timer = setTimeout(() => { console.log("resolve"); resolve(); }, 3000); ac.signal.addEventListener("abort", () => { clearTimeout(timer); reject("abrted"); }); }) .then(() => { setLazyCount(count); }) .catch((err) => { console.log("error:", err); }) .finally(() => { console.log("finally set loading: false"); setLoading(false); }); return () => { ac.abort(); console.log("abort"); }; }, [count]);  * * * 我尝试过把设置 loading 为true 的代码用 setTimeout 包裹起来，这样可以正确设置 loading，但是，当 Promise 立即完成的时候，顺序就又错误了。 useEffect(() => { setTimeout(() => { console.log("set loading: true"); setLoading(true); }); const ac = new AbortController(); new Promise((resolve, reject) => { const timer = setTimeout(() => { console.log("resolve"); resolve(); // ... 然后把这个部分全部放在 settimeout 中才可以，但是这样写也太别扭了 useEffect(() => { const ac = new AbortController(); setTimeout(() => { console.log("set loading: true"); setLoading(true); new Promise((resolve, reject) => { const timer = setTimeout(() => { console.log("resolve"); resolve(); }, 3000); ac.signal.addEventListener("abort", () => { clearTimeout(timer); reject("abrted"); }); }) .then(() => { setLazyCount(count); }) .catch((err) => { console.log("error:", err); }) .finally(() => { console.log("finally set loading: false"); setLoading(false); }); }); return () => { ac.abort(); console.log("abort"); }; }, [count]); * * * 在线测试 [https://codesandbox.io/p/sandbox/use-effect-loading-fshhvm?fi...](https://link.segmentfault.com/?enc=NAdvKvTeh8iZpmZWY%2BFBaQ%3D%3D.h0XyTdCoCwq8tpMP%2B5yS%2BtzDlGSqWej48BsazscC8iEbvJr7r5pOUI6fGMv0PyPV97joBvFKKUzjERDBJfSVFu7JTYe3QWUYQXEXKuCU3SE3JXHkZLzQ4WLRDf1OWM6I)