使用React createContext()时遇TypeError：解构null属性失败求助

错误信息：

App.js:6
Uncaught TypeError: Cannot destructure property 'consoleLogFunction' of '(0 , react__WEBPACK_IMPORTED_MODULE_1__.useContext)(...)' as it is null.

错误原因 #

1. 错误使用Context对象作为包裹组件：你在App.js中用<AppContext>包裹内容，但AppContext是createContext()创建的Context对象，并非Provider组件。应该使用你定义的GlobalContext组件（它内部封装了AppContext.Provider）来完成包裹。
2. 在Provider外部调用useContext：App组件是Provider的父级，你在App组件顶层调用useContext(AppContext)时，还处于Provider的作用域之外，获取到的是createContext()的默认值（null），因此解构时抛出错误。

修正后的代码 #

GlobalContext.js

import React from 'react'
import { createContext } from 'react'

export const AppContext = createContext();

function GlobalContext({ children }) {
    const consoleLogFunction = () => {
        console.log("ok")
    }
    return (
        <AppContext.Provider value={{consoleLogFunction}}>
            {children}
        </AppContext.Provider>
    )
}

export default GlobalContext

App.js

import "./index.css";
import { useContext, useEffect } from "react";
import GlobalContext from "./components/GlobalContext";
import { AppContext } from "./components/GlobalContext";

function Home() {
  const { consoleLogFunction } = useContext(AppContext);
  
  useEffect(() => {
    consoleLogFunction();
  }, []);

  return <div>home</div>;
}

function App() {
  return (
    <GlobalContext>
      <Home />
    </GlobalContext>
  );
}

export default App;

关键修正点 #

• 给GlobalContext组件添加children属性，让它能正确传递并渲染子组件。
• 用GlobalContext组件替代AppContext作为包裹容器，确保子组件处于Provider的作用域内。
• 将使用useContext的逻辑移到Home子组件中，只有Provider内部的组件才能获取到Context提供的值。

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