useLayoutEffect未触发，无法加载后端数据至状态供表格渲染

问题现象 #

使用useLayoutEffect从后端加载数据并存入state/context，MyTable依赖该上下文渲染，但钩子未触发，组件渲染完成后上下文为空，MyTable抛出错误**"未获取到设置"**。浏览器仅打印1、2、4，useLayoutEffect内的3从未输出。

核心问题点 #

1. 上下文未传递：MySettings组件未将useGetSetting返回的state和dispatch通过SettingsContext.Provider传递给子组件，导致MyTable调用useSettingsContext时获取不到上下文，直接抛出错误中断渲染流程，useLayoutEffect根本没机会执行。
2. 异步请求未处理：假设getSettings是后端异步请求，原代码直接赋值会得到Promise对象，无法正确获取数据。
3. 依赖数组冗余：useReducer返回的dispatch是稳定引用，无需加入useLayoutEffect的依赖数组。

修复方案 #

1. 添加上下文Provider包裹子组件 #

在MySettings中用SettingsContext.Provider包裹MyTable，将状态和dispatch传入上下文：

export function MySettings() {
    const id = useSelector(getId);
    const { state, dispatch } = useGetSetting(id);

    return (
        <SettingsContext.Provider value={{ state, dispatch }}>
            <div>
                <section>
                    <header>
                        <MyTable />
                    </header>
                </section>
            </div>
        </SettingsContext.Provider>
    );
}

2. 处理异步请求并优化useLayoutEffect #

修改useGetSetting，添加加载状态，用async/await处理异步请求，移除冗余依赖：

export function useGetSetting(
    id: number
): useGetSettingResponse {
    console.log("1");
    // 初始状态添加loading字段
    const [state, dispatch] = React.useReducer(settingsReducer, {
        ...settingsInitialState,
        loading: true
    });
    console.log("2");

    React.useLayoutEffect(() => {
        console.log("3");
        // 封装异步请求逻辑
        const fetchSettings = async () => {
            try {
                const settings = await getSettings(id); // 适配异步请求
                dispatch({
                    type: 'SET_SETTINGS',
                    settings: settings,
                });
            } catch (err) {
                console.error('加载设置失败:', err);
            } finally {
                dispatch({ type: 'SET_LOADING', loading: false });
            }
        };

        fetchSettings();
    }, [id]); // 移除dispatch依赖

    console.log("4");
    return { state, dispatch };
}

3. 更新Reducer处理新的Action类型 #

确保settingsReducer能处理加载状态和设置更新的action：

function settingsReducer(state, action) {
    switch (action.type) {
        case 'SET_SETTINGS':
            return { ...state, settings: action.settings };
        case 'SET_LOADING':
            return { ...state, loading: action.loading };
        default:
            return state;
    }
}

4. 优化上下文钩子，处理加载状态 #

修改useSettingsContext，在加载状态返回空数据避免报错：

export const useSettingsContext = () => {
    const context = React.useContext(SettingsContext);
    if (context === undefined) {
        throw new Error('未找到SettingsContext，请确保组件被包裹在Provider中');
    }
    // 加载中返回空数组，避免Table报错
    if (context.state.loading) {
        return [];
    }
    return context.state.settings;
};

说明 #

• 上下文未传递是导致渲染中断、useLayoutEffect未触发的根本原因，修复后钩子会正常执行。
• 加载状态的添加可以避免组件在数据未就绪时崩溃，提升用户体验。
• 异步请求的处理确保能正确获取后端数据并更新状态。

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