React useContext报错：Cannot destructure property undefined

报错信息 #

Login.jsx:10 Uncaught TypeError: Cannot destructure property 'user' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is undefined.
    at Login (Login.jsx:10:1)

报错原因 #

useContext(Context)返回值为undefined才会触发这个解构错误，结合你贴的代码，问题出在以下两点之一：

• 调用useContext的Login组件没有被ContextProvider包裹在作用域内，且Context导入存在异常，没有命中createContext设置的初始默认值
• Login组件中导入Context的路径错误，导致传入useContext的Context对象本身是undefined，hook执行后直接返回undefined

补充：你贴的Context初始化、Provider封装代码本身没有语法问题，Context内部导入未使用的useEffect不会触发该报错。

修复方案 #

按以下顺序排查修复：

1. 检查应用入口文件（通常是src/index.js或src/App.js），确认ContextProvider作为祖先组件包裹了整个应用/Login所在的路由分支，正确写法参考：

// src/index.js 示例
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
// 注意这里的Context导入路径要和实际文件位置匹配
import { ContextProvider } from './context/Context';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    {/* Provider必须放在外层，包裹所有需要调用该Context的组件 */}
    <ContextProvider>
      <App />
    </ContextProvider>
  </React.StrictMode>
);

注意：ContextProvider不能放在Login组件内部，也不能和Login组件平级渲染，必须是Login组件的父级/祖先级节点。

2. 校验Login.js中的Context导入路径：你当前写的路径是../../context/Context，需要对照实际文件目录确认层级正确。举个例子：如果Login.js存放在src/pages/login/Login.jsx，Context.js存放在src/context/Context.js，这个路径是正确的；如果层级不对，会导入undefined值直接触发报错。
3. 如果前两步都没问题，检查Reducer.js文件是否存在导出错误：确认Reducer是默认导出、文件内没有语法错误，避免useReducer初始化失败导致Provider渲染异常。

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