React Context使用报错：无法解构undefined的'notes'属性

问题场景 #

创建NoteContext后，在NoteState组件中通过useState定义笔记数组状态，再通过NoteContext.Provider传递状态。但在Notes组件中使用useContext获取上下文并解构notes和setNotes时，抛出错误：Uncaught TypeError: Cannot destructure property 'notes' of 'noteCtx' as it is undefined。

相关代码 #

NoteContext.js #

import { createContext } from "react";

const NoteContext = createContext();

export default NoteContext;

NoteState.js #

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

const NoteState = (props) => {
const notesinitial = [
    {
        "_id": "64ec90f7007592ad08788d86",
        "user": "64e6057421a1b517d5a58edb",
        "title": "My Title",
        "description": "Make a desciplined life",
        "tage": "General",
        "date": "2023-08-28T12:20:07.092Z",
        "__v": 0
    },
    {
        "_id": "64ec90f7007592ad08788d86",
        "user": "64e6057421a1b517d5a58edb",
        "title": "My Title",
        "description": "Make a desciplined life",
        "tage": "General",
        "date": "2023-08-28T12:20:07.092Z",
        "__v": 0
    }
]
const [notes, setNotes] = useState(notesinitial)

return (
    <NoteContext.Provider value={{ notes, setNotes }}>
        {props.children}
    </NoteContext.Provider>
)
}
export default NoteState;

Notes.js #

import React, { useContext } from 'react' 
import NoteContext from "../context/notes/NoteContext"

export const Notes = () => {
const noteCtx = useContext(NoteContext);
console.log(noteCtx);
const { notes, setNotes } = noteCtx;

return (
    <div>
        <div className="container my-3">
            <h2>Your Notes</h2>
            {notes.map((note) => {
                return note.title;
            })}
        </div>
    </div>
)
}

export default Notes;

错误栈信息 #

Notes.js:8 Uncaught TypeError: Cannot destructure property 'notes' of 'noteCtx' as it is undefined.
at Notes (Notes.js:8:1)
at renderWithHooks (react-dom.development.js:16305:1)
at mountIndeterminateComponent (react-dom.development.js:20074:1)
at beginWork (react-dom.development.js:21587:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
...

解决方案 #

这个错误的核心原因是：Notes组件没有被NoteContext.Provider包裹。React的useContext只能在Provider的子组件树中获取到传递的上下文值，如果组件不在Provider范围内，useContext会返回createContext时传入的默认值（这里创建NoteContext时没有传默认值，所以返回undefined）。

步骤1：在根组件中包裹需要使用Context的组件 #

找到你的根组件（比如App.js），导入NoteState并将Notes组件（以及所有需要使用NoteContext的组件）包裹在NoteState内部：

import NoteState from './context/notes/NoteState';
import Notes from './components/Notes';

function App() {
  return (
    <NoteState>
      <div className="App">
        <Notes />
        {/* 其他依赖NoteContext的组件也放在这里 */}
      </div>
    </NoteState>
  );
}

export default App;

可选：给Context设置默认值（兜底方案） #

为了避免类似的解构报错，你可以在创建NoteContext时设置一个默认值，这样即使组件不在Provider范围内，也不会返回undefined：

import { createContext } from "react";

// 设置默认值，避免解构时直接报错
const NoteContext = createContext({ notes: [], setNotes: () => {} });

export default NoteContext;

内容的提问来源于stack exchange，提问作者AYUSH SINGH BHATI