React中如何确保多个状态更新按顺序同步执行？

问题原因 #

React的useState状态更新是异步批量处理的，你代码中在调用setData({ ...fetchedHugeData })后立刻执行setIsDataLoading(false)，虽然代码顺序是先更新数据再关闭加载，但状态更新不会立刻生效，导致加载状态提前结束，而数据的更新还未完成渲染，出现状态异常。

解决方案 #

方案一：通过useEffect监听数据变化控制加载状态

这是最稳妥的方式，确保只有当数据确实更新完成后，才关闭加载状态：

const [data, setData] = useState(null);
const [isDataLoading, setIsDataLoading] = useState(true);

const fetchData = async () => {
    setIsDataLoading(true);
    const fetchedHugeData = await hugeDataFetch();
    setData({ ...fetchedHugeData });
}

useEffect(() => {
    fetchData();
}, [aVariable]);

// 监听data状态变化，数据就绪后关闭加载
useEffect(() => {
    if (data !== null) {
        setIsDataLoading(false);
    }
}, [data]);

return [isDataLoading, data];

补充说明

• 初始状态isDataLoading设为true是合理的，第一次渲染时会显示加载状态；当aVariable变化触发重新请求时，setIsDataLoading(true)会重新开启加载，避免数据切换时的状态混乱。
• 如果使用React 18+版本，异步函数中的多个setState会被自动批量处理，此时你也可以保留原代码的顺序，但方案一的兼容性更好，能确保加载状态和数据状态完全同步。

内容的提问来源于stack exchange，提问作者Light Yagami