使用React useContext Hook报错：Cannot read properties of undefined

错误原因分析 #

你的代码里有两个核心问题导致Context无法被组件正确获取：

• NoteState被定义为async函数：React组件不能是异步函数，async函数会返回Promise而非React元素，这直接导致<NoteContext.Provider>没有被正确渲染，组件树里的Context没有提供任何值，useContext只能拿到createContext()的默认值（这里没传默认值，所以是undefined）。
• 直接在NoteState里硬编码渲染App：这种写法会让App脱离原本的组件树结构，你的About组件应该是App内部的子组件，硬渲染App会导致About不在Provider的包裹范围内，自然拿不到Context值。

修复后的代码 #

1. 修正NoteState.js #

去掉async关键字，改用props.children传递需要被Provider包裹的子组件：

import NoteContext from "./noteContext";
import { useState } from "react";

// 移除async关键字
const NoteState = (props) => {
     const [state, setState] = useState({
         name: "nk",
         class: "8a"
     });

    return (
        <NoteContext.Provider value={state}>
            {/* 用props.children接收外部传入的子组件 */}
            {props.children}
        </NoteContext.Provider>
    )
}

export default NoteState;

2. 在入口文件（如index.js）中用NoteState包裹App #

确保App及其内部所有组件都处于Provider的覆盖范围内：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import NoteState from './context/notes/NoteState'; // 路径根据你的项目结构调整

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <NoteState>
      <App />
    </NoteState>
  </React.StrictMode>
);

3. 可选：给createContext设置默认值（防意外报错） #

在noteContext.js中传入默认对象，避免Provider未生效时访问属性直接报错：

import { createContext } from "react";
// 设置默认值，兜底处理
const noteContext = createContext({
  name: "",
  class: ""
});

export default noteContext;

验证修复 #

修改完成后，About组件就能正常获取Context中的值，mynote.name和mynote.class可以正确渲染，不会再出现undefined相关的错误。

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