React嵌套Context Provider问题：useContext始终返回undefined

问题描述 #

在ReactJS项目中使用Main.js作为全局包裹组件，嵌套了多个可异步加载数据的Context Provider（MyProvider.js/YourProvider.js）。遇到如下问题：

• Main的直接子组件Child1调用useContext始终返回undefined，即使useEffect也无法检测到值的变化；
• Child1的子组件Child2初始值为undefined，但后续能获取到正确的异步加载值。

需解答：

1. 该现象的原因是什么？
2. 为何仅直接子组件出现此问题，而子组件却能正常工作？
3. 这是否与Provider的嵌套有关？

代码示例 #

Main.js #

import { MyProvider } from "../../contexts/MyProvider.js";
import { YourProvider } from "../../contexts/YourProvider.js";
import Header from "./Header.js";
import Footer from "./Footer.js";

export default function Main({children}) {
    return (
        <MyProvider>
            <YourProvider>
                <Header/>
    
                <main>
                    <div>
                        {children}
                    </div>
                </main>

                <Footer/>
            </YourProvider>
        </MyProvider>
    );
}

MyProvider.js/YourProvider.js #

import { createContext, useState, useEffect } from 'react';
import { getMyValue } from "../../lib.js";

export const MyContext = createContext();

export function MyProvider({children}) {
    const [myValue, setMyValue] = useState(undefined);

    useEffect(() => {
        getMyValue().then(result => {
            setMyValue(result);
        });
    }, []);

    return (
        <MyContext.Provider value={myValue}>
            {children}
        </MyContext.Provider>
    );
}

Child1.js #

import { useContext, useEffect } from "react";
import { MyContext } from "../../contexts/MyProvider.js";
import { YourContext } from "../../contexts/YourProvider.js";
import Main from "./Main.js";
import Child2 from "./Child2.js";

export default function Child1({children}) {
    const myValue = useContext(MyContext);
    const yourValue = useContext(YourContext);

    useEffect(() => {
        console.log(myValue); // always undefined
        console.log(yourValue); // always undefined
    }, [myValue, yourValue]);

    return (
        <Main>
            <p>{myValue}</p>
            <p>{yourValue}</p>
            <Child2/>
        </Main>
    );
}

Child2.js #

import { useContext, useEffect } from "react";
import { MyContext } from "../../contexts/MyProvider.js";
import { YourContext } from "../../contexts/YourProvider.js";

export default function Child2({children}) {
    const myValue = useContext(MyContext);
    const yourValue = useContext(YourContext);

    useEffect(() => {
        console.log(myValue); // initially undefined, then the real value
        console.log(yourValue); // initially undefined, then the real value
    }, [myValue, yourValue]);

    return (
        <div>
            <p>{myValue}</p>
            <p>{yourValue}</p>
        </div>
    );
}

问题解答 #

1. 现象的核心原因 #

Child1不在任何Context Provider的作用范围内。从代码看，Child1自身返回了<Main>组件——而Main才是包裹Provider的容器。也就是说，Child1是Main的父组件，而非子组件。Provider的作用范围仅覆盖Main内部的children，Child1本身在这个范围之外，自然只能拿到createContext()的默认值（undefined），且永远无法感知到Provider的值更新。

2. 直接子组件与深层子组件的差异原因 #

Child2是作为Child1返回的<Main>的children存在的，因此它处于Main内部的Provider包裹范围内。当Provider异步加载完成并更新值时，Child2会被重新渲染，能正常捕获到Context的新值；而Child1本身不在Provider的覆盖层级里，无论Provider的值如何变化，都不会触发它的更新，所以始终拿不到有效值。

3. 与Provider嵌套的关系 #

这个问题和Provider的嵌套无关，核心是组件的层级关系搞反了。当前Provider的嵌套逻辑是正确的，但Child1的使用方式错误——它应该作为Main的子组件被渲染，而非反过来在内部渲染Main。

修复方案 #

调整组件层级，让Child1成为Main的子组件，同时修改Child1代码去掉内部的<Main>：

根组件示例 #

function App() {
  return (
    <Main>
      <Child1 />
    </Main>
  );
}

修改后的Child1.js #

import { useContext, useEffect } from "react";
import { MyContext } from "../../contexts/MyProvider.js";
import { YourContext } from "../../contexts/YourProvider.js";
import Child2 from "./Child2.js";

export default function Child1({children}) {
    const myValue = useContext(MyContext);
    const yourValue = useContext(YourContext);

    useEffect(() => {
        console.log(myValue); // 初始undefined，后续会拿到有效值
        console.log(yourValue); // 初始undefined，后续会拿到有效值
    }, [myValue, yourValue]);

    return (
        <div>
            <p>{myValue}</p>
            <p>{yourValue}</p>
            <Child2/>
        </div>
    );
}

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