React中无法在App组件消费GlobalContext值的问题排查

核心崩溃原因 #

1. Context组件子元素传递错误：React中组件的子元素默认通过children属性传递，但你写的GlobalState组件接收的是child属性，导致Provider内部渲染的是undefined，触发致命错误。
2. 未导入使用的组件：App组件中用到了<Home />、<Favorites />、<Details />三个组件，但没有导入，引用未定义变量会直接导致应用崩溃。

具体修改步骤 #

1. 修正GlobalState组件的子元素接收 #

修改Context/index.js中的GlobalState组件，将child改为children：

import { createContext, useState } from "react";

export const GlobalContext = createContext();

export const GlobalState = ({ children }) => {
  const [val, setVal] = useState("hi from context");
  return <GlobalContext.Provider value={val}>{children}</GlobalContext.Provider>;
};

2. 导入App中使用的组件 #

在App.jsx顶部添加对应组件的导入语句（根据实际文件路径调整）：

import { useContext, useState } from "react";
import { Route, Routes } from "react-router-dom";
import Navbar from "./Components/Navbar/index";
import Home from "./Components/Home";
import Favorites from "./Components/Favorites";
import Details from "./Components/Details";
import { GlobalContext } from "./Context/index";

function App() {
  const x = useContext(GlobalContext);
  console.log("globaldata", x);
  return (
    <>
      <Navbar />
      <Routes>
        <Route exact path="/" element={<Home />} />
        <Route exact path="/favorites" element={<Favorites />} />
        <Route exact path="/recipe-item/:id" element={<Details />} />
      </Routes>
    </>
  );
}

export default App;

额外检查 #

确认main.jsx中GlobalState的导入路径是否正确：你的Context文件是Context/index.js，但main里写的是./Context/index.jsx，如果实际文件后缀是.js，需要改成./Context/index.js，避免模块找不到的错误。

完成以上修改后，应用即可正常运行，控制台会输出globaldata hi from context的日志。

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