React嵌套组件共享Context报UserContext is not defined错误

• UserContext是你定义在App组件函数内部的局部变量，Login组件中既没有声明该变量，也没有从外部导入，直接调用自然触发'UserContext' is not defined的语法报错。
• 额外存在两个隐性问题：
  1. Context定义在组件内部会导致每次App重渲染时，createContext都会生成全新的Context对象，直接造成消费端状态丢失、异常重渲染。
  2. 当前UserContext.Provider仅包裹了TopPanel组件，<Routes>块完全在Provider作用域外，路由匹配到的页面组件根本无法获取Context值。

1. 调整Context定义位置 #

将Context从App组件内部移出，放到可全局导入的公共位置，你可以直接在已有的UserCtx类文件中定义并导出Context：

// src/services/UserCtx.js
import React from "react";

// 全局定义并导出Context，供所有消费组件导入
export const UserContext = React.createContext({});

class UserCtx {
    isLoggedIn;
    token;

    constructor() {
        this.isLoggedIn = false;
    }

    logIn = (token) => {
       console.log("LOGGING IN!");
       this.isLoggedIn = true;
       this.token = token;
    }
}

export default UserCtx;

2. 修正App.js逻辑 #

删除App内部的Context定义，导入公共位置的Context，同时扩大Provider的包裹范围，覆盖所有需要共享状态的子组件，建议用useMemo缓存类实例避免重复创建：

// src/App.js
import logo from './logo.svg';
import './App.css';
import React, { useMemo } from "react";
import {
    BrowserRouter as Router,
    Routes,
    Route
} from "react-router-dom";
import TopPanel from "./components/topPanel/TopPanel";
// 导入类实例和Context
import UserCtx, { UserContext } from "./services/UserCtx";

function App() {
    // 缓存UserCtx实例，仅在组件初始化时创建一次
    const userCtxInstance = useMemo(() => new UserCtx(), []);

    return (
        <Router>
            {/* Provider包裹所有需要访问Context的子元素 */}
            <UserContext.Provider value={userCtxInstance}>
                <TopPanel/>
                <Routes>
                    {/* 原有路由配置不变 */}
                </Routes>
            </UserContext.Provider>
        </Router>
    );
}

export default App;

3. 修正Login组件调用逻辑 #

在Login组件中导入公共定义的UserContext后，再调用useContext消费：

// src/components/xxx/Login.js （根据你的实际路径调整导入层级）
import React, {useState, useContext} from "react";
// 导入Context对象，注意根据文件层级调整相对路径
import { UserContext } from "../../services/UserCtx";

function Login() {
    const userCtx = useContext(UserContext);

    // 原有业务逻辑不变
}

export default Login;

注意：所有需要消费该Context的子组件，都必须从同一个路径导入UserContext对象，否则会出现Context不匹配、拿不到值的问题。

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