React Context Api报错：Cannot Read Property of Undefined Reading 'name' 原因及解决

错误原因 #

你在单文件写法里只导出了NoteState组件，而消费Context的页面（比如About）大概率错误地导入了NoteState组件来获取Context，而非真正的NoteContext对象。

比如消费组件里可能写了这样的代码：

import NoteState from './NoteState'
const { name } = useContext(NoteState)

useContext要求传入的是Context对象，而不是组件，所以这里会返回undefined，自然触发“Cannot Read Property of Undefined Reading 'name'”的错误。

拆分写法能正常工作，是因为你单独导出了NoteContext，消费组件可以正确导入这个Context对象来使用。

单文件的正确写法 #

在同一个文件中同时导出NoteContext和NoteState组件，让消费组件能拿到正确的Context对象：

import { createContext } from "react";

// 创建Context并导出
export const NoteContext = createContext({ name: "default" });

export default function NoteState(props) {
  const obj = {
    name: "johnsmilga",
    email:"johndoe343@gmail.com"
  };

  return (
    <NoteContext.Provider value={obj}>
      {props.children}
    </NoteContext.Provider>
  );
}

然后在消费组件（比如About页面）中，正确导入NoteContext：

import { useContext } from 'react'
import { NoteContext } from './NoteState'

function About() {
  const { name } = useContext(NoteContext)
  return <div>{name}</div>
}

这样就能保证useContext获取到正确的Context对象，正常读取name属性。

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