React Context结合useState状态不更新问题求助

问题根源分析 #

你的代码存在两个核心问题导致状态无法更新：

1. Context Provider的作用域错误 #

从App.js的结构来看，CurtainContextProvider被嵌套在Layout组件内部，而如果MainNavigation是Layout的子组件（比如Layout顶部导航栏），那么MainNavigation实际上处于Provider的作用域之外。此时组件调用useContext(CurtainContext)拿到的是创建Context时的默认值，而非Provider提供的动态状态，调用setCurtainVisible也只是执行默认的空函数，根本不会触发Provider内部的state更新。

2. State未设置初始值 #

在CurtainContextProvider中，useState()没有传入初始值，导致curtainVisible的初始状态是undefined，和Context默认的false不一致，可能引发渲染逻辑判断异常。

修复步骤 #

步骤1：调整Provider的作用域 #

将CurtainContextProvider移到Layout外层，确保所有需要访问Context的组件（包括Layout内的MainNavigation）都处于Provider的包裹范围内：

// App.js
<CurtainContextProvider>
  <Layout>
    <Routes>
      <Route element={<HomePage/>} path='/' exact/>
      <Route element={<HomePage/>} path='/home' exact/>
      <Route element={<ServicesPage/>} path='/services' exact/>
      <Route element={<ProductsPage/>} path='/products' exact/>
      <Route element={<ContactPage/>} path='/contact' exact/>
      <Route element={<LoginPage/>} path='/login' exact/>
    </Routes>
  </Layout>
</CurtainContextProvider>

步骤2：为State设置初始值 #

在CurtainContextProvider中，给useState传入初始值false，和Context的默认值保持一致：

// curtain-context.js
export function CurtainContextProvider(props) {
    // 修复：添加初始值false
    const [curtainVisible, setCurtainVisible] = useState(false);

    function setCurtainVisibleHandler(value) {
        setCurtainVisible(value);
        console.log(value);
    }

    const context = {
        curtainVisible: curtainVisible,
        setCurtainVisible: setCurtainVisibleHandler
    };

    return (
        <CurtainContext.Provider value={context}>
            {props.children}
        </CurtainContext.Provider>
    );
}

可选优化 #

将MainNavigation中var curtainContext改为const（语法规范问题，不影响功能，但更符合React开发习惯）：

// MainNavigation.js
const curtainContext = useContext(CurtainContext);

完成以上修复后，点击按钮调用setCurtainVisible(true)时，Provider内部的state会正确更新，MainNavigation组件也会感知到Context值的变化，从而渲染MobileCurtain组件。

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