React组件中Redux加载状态与本地状态更新不同步问题求助

问题根源在于React的useState更新是异步批量执行的——你在调用setTransformedData和setTransformedConfig后立刻通过Redux关闭加载状态，此时组件会先响应Redux的状态变化重新渲染，但本地的transformedData和transformedConfig还没完成更新，导致短暂显示无数据。

下面是两种可行的解决办法：

方法一：监听本地数据状态，完成后关闭加载 #

通过额外的useEffect监听transformedData和transformedConfig的变化，只有当这两个状态都更新完成后，再把Redux的加载状态设为false。这样能保证渲染时数据已经准备就绪。

修改后的代码：

const [transformedData, setTransformedData] = useState<any[]>([]);
const [transformedConfig, setTransformedConfig] = useState<Object>({});
const gridRef = useRef();

useEffect(() => {
    (async () => {
        try {
            dispatch(setLoading(true)); 

            const data = await dmServices.getGridData();

            // 只更新本地数据状态，不在这里关闭加载
            setTransformedData(data);
            setTransformedConfig(data);
        } catch (err) {
            console.error('Error while fetching and transforming data:', err);
            dispatch(setLoading(false));
        }
    })();
}, [module?.id, filters]);

// 监听本地数据状态，更新完成后关闭加载
useEffect(() => {
    // 确保数据和配置都已更新（可根据实际逻辑调整判断条件）
    if (transformedData.length > 0 && Object.keys(transformedConfig).length > 0) {
        dispatch(setLoading(false));
    }
}, [transformedData, transformedConfig]);

return (
    <div>
        {transformedData.length > 0 && <Grid config={transformedConfig} data={transformedData} autosizeAllColumns={true} id='Grid' ref={gridRef} />}
        {transformedData.length == 0 && !gridLoading && <NoDataAvailable />}
    </div>
);

方法二：将数据和配置移入Redux管理 #

如果不想维护本地状态和Redux状态的同步，可以把transformedData和transformedConfig也放到Redux的store中。这样所有状态更新都在同一个数据流里，不会出现时序问题——当数据转换完成后，一次性dispatch更新数据、配置和加载状态，确保组件渲染时所有状态都是一致的。

示例（基于Redux Toolkit）： #

首先在slice中定义相关状态：

import { createSlice } from '@reduxjs/toolkit';

const gridSlice = createSlice({
    name: 'grid',
    initialState: {
        loading: false,
        transformedData: [],
        transformedConfig: {}
    },
    reducers: {
        setLoading: (state, action) => {
            state.loading = action.payload;
        },
        setGridData: (state, action) => {
            state.transformedData = action.payload.data;
            state.transformedConfig = action.payload.config;
        }
    }
});

export const { setLoading, setGridData } = gridSlice.actions;
export default gridSlice.reducer;

然后在组件中使用：

const { loading, transformedData, transformedConfig } = useSelector(state => state.grid);
const dispatch = useDispatch();
const gridRef = useRef();

useEffect(() => {
    (async () => {
        try {
            dispatch(setLoading(true)); 

            const data = await dmServices.getGridData();

            // 一次性更新所有状态
            dispatch(setGridData({ data: data, config: data }));
            dispatch(setLoading(false));
        } catch (err) {
            console.error('Error while fetching and transforming data:', err);
            dispatch(setLoading(false));
        }
    })();
}, [module?.id, filters]);

return (
    <div>
        {transformedData.length > 0 && <Grid config={transformedConfig} data={transformedData} autosizeAllColumns={true} id='Grid' ref={gridRef} />}
        {transformedData.length == 0 && !loading && <NoDataAvailable />}
    </div>
);

注意事项 #

• 方法一不需要改动Redux结构，适合快速修复；方法二更适合长期维护，避免本地状态和全局状态的不一致。
• 如果你的data转换逻辑比较复杂，确保在更新状态前完成所有转换操作，避免数据不完整。

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