React Context无法通过Fetch更新数据问题求助

核心问题 #

1. Context值未用状态管理
   你的ResumeContextProvider直接将value固定为undefined，没有通过React状态（如useState）维护数据。这导致即使加载到数据，也无法更新Context的值，子组件自然拿不到最新数据。

2. 局部变量赋值无效
   ResumeLoader里的resume是从useResumeContext()获取的局部变量，直接赋值resume = data只会修改这个局部变量，既不会触发组件重渲染，也不会同步到Context的Provider中，完全无法更新全局状态。

修复后的完整代码 #

import { createContext, useContext, useState, useEffect, PropsWithChildren } from 'react';

const ResumeContext = createContext<ResumeJson | undefined>(undefined);

export function useResumeContext() {
    const context = useContext(ResumeContext);
    return context;
}

export default function ResumeContextProvider({ children }: PropsWithChildren) {
    // 用useState维护resume状态，初始值为undefined
    const [resume, setResume] = useState<ResumeJson | undefined>(undefined);

    useEffect(() => {
        async function getResumeJson() {
            try {
                const response = await fetch("resume.json");
                const data: ResumeJson = await response.json();
                // 通过setResume更新状态，触发Provider重渲染并更新Context值
                setResume(data);
            } catch (error) {
                console.error("加载简历数据失败:", error);
            }
        }

        getResumeJson();
    }, []);

    // 将状态绑定到Provider的value，状态更新时自动同步给所有消费组件
    return (
        <ResumeContext.Provider value={resume}>
            {children}
        </ResumeContext.Provider>
    );
}

关键修改点 #

• 删除了无用的ResumeLoader组件，将数据加载逻辑直接整合到ResumeContextProvider中
• 用useState创建状态管理resume，通过setResume触发状态更新，进而更新Context的value
• 添加错误捕获，避免数据加载失败时无提示
• Provider的value绑定到resume状态，状态更新时所有消费Context的组件会自动拿到最新数据

App组件中使用示例 #

function App() {
    const resume = useResumeContext();

    // 处理加载态
    if (!resume) {
        return <div>加载中...</div>;
    }

    return (
        <div>
            <h1>{resume.name}</h1>
            {/* 渲染其他简历内容 */}
        </div>
    );
}

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