React Context中创建的变量无法调用？如何正确调用Context变量

问题根源 #

你的代码存在三处关键错误，导致Context中的变量无法正常读取：

1. Provider组件props拼写错误：Context文件里的Provider ({childern})应为({children})，拼写错误会导致子组件无法正确被Provider包裹（虽你在index.js中自行嵌套了Provider，但这是冗余且错误的写法）
2. 错误导出多余Context：Context文件最后一行export const value = createContext(Provider);完全无效，这创建了一个新的Context对象，和你要传递的count、increment毫无关联
3. index.js错误传递Context值：你导入了上述错误的value并传给GamesContext.Provider，导致组件通过useContext拿到的不是包含count的对象，而是错误的Context实例，解构出的count为undefined，自然无法显示

修改后的代码 #

1. Context文件（修正后）

import { createContext, useState } from 'react';

const GamesContext = createContext();

// 修正children拼写
function Provider ({children}) {
    const [count, setCount] = useState(5);

    const value = {
        count,
        increment: () => {
            setCount(count + 1);
        },
    };
    
    return <GamesContext.Provider value={value}>
        {children}
    </GamesContext.Provider>
}

export default GamesContext;
export {Provider};
// 删除多余的export const value = ...

2. index.js（修正后）

import React from "react";
import ReactDOM from "react-dom/client";
import App from './App';
// 导入正确的Provider组件
import { Provider } from "./context/games";

const el = document.getElementById('root');
const root = ReactDOM.createRoot(el);

// 使用Context文件导出的Provider包裹App
root.render(
<Provider>
    <App />
</Provider>
);

3. 调用变量的组件（无需修改）

import GameShow from "./GameShow";
import { useContext } from "react";
import GamesContext from "../context/games";

function GameList ({games, onDelete, onEdit}) {
    const {count, increment} = useContext(GamesContext);
    
    // 你的其他逻辑代码

    return <div className="book-list">
        {renderedGames}
        {count}
        <button onClick={increment}>Click</button>
    </div>
};

修改说明 #

• 移除多余的错误Context导出，避免变量混淆；修正Provider的children拼写，确保组件嵌套逻辑正常
• index.js中使用Context文件导出的Provider组件，让App及其子组件能正确获取包含count和increment的Context值
• 组件中useContext(GamesContext)可正常解构出目标变量，点击按钮也能触发count更新

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