React Context API无法获取值，仅返回初始值问题求助

问题重现 #

在React项目中使用Context API时触发错误：Cannot destructure property 'x' of 'useContext(...)' as it is undefined。具体场景：

• 在main.jsx中用Testcontext组件包裹了App
• Testcontext.jsx中创建Context并提供值{x:'user 1',y:'user 2'}
• 但Signup.jsx调用useContext时无法获取目标值，仅返回Context初始值null

错误原因 #

核心问题是Context作用范围未覆盖路由组件：

• 项目使用RouterProvider管理路由，路由定义的组件（如Signup）由RouterProvider直接渲染，而你在RouterProvider内部用Testcontext仅包裹了App组件，Signup不在App的子组件树中，因此无法访问到Context。
• RouterProvider的children会被忽略，路由内容完全由传入的router配置决定，导致Testcontext的包裹范围未包含路由组件。

修复步骤 #

方案1：将Context包裹在RouterProvider外层 #

修改main.jsx，把Testcontext移到RouterProvider外部，确保所有路由组件都处于Context作用范围内：

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./index.css";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from 'react-query/devtools'
import { RouterProvider } from "react-router-dom";
import router from "./Routes/Routes";
import Testcontext from "./Context/Testcontext";

const queryClient = new QueryClient()
ReactDOM.createRoot(document.getElementById("root")).render(
  <Testcontext>
    <RouterProvider router={router} >
      <QueryClientProvider client={queryClient}>
        <React.StrictMode>
          <App />
          <ReactQueryDevtools initialIsOpen={false} />
        </React.StrictMode>
      </QueryClientProvider>
    </RouterProvider>
  </Testcontext>
);

方案2：在路由根组件中包裹Context #

若不想修改main.jsx外层结构，可在路由配置的根组件（如Routes.js的根路由组件）外层包裹Testcontext，确保所有路由子组件都能访问Context。

验证修复 #

修改完成后，Signup.jsx可正常获取Context值：

import React, { useContext } from "react";
import { TestContextProvider } from "../../Context/Testcontext";

const Signup = () => {
  const {x} = useContext(TestContextProvider)
  console.log(x) // 输出："user 1"

  return (
    <div>
      <p>my component</p>
    </div>
  );
};

export default Signup;

额外检查点 #

• 确认Testcontext.jsx中Context的导出与使用逻辑正确：TestContextProvider是创建的Context对象，Testcontext是提供Context的组件，二者不要混淆。
• 确保路由配置中的Signup组件确实处于Testcontext包裹的组件树内。

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