React中用Context Hooks管理笔记遇解构undefined错误求助

在React应用中尝试用Context和Hooks管理笔记数据时，出现错误：Cannot destructure property 'notes' of 'context' as it is undefined.

控制台错误日志 #

Notes.js:10 Uncaught TypeError: Cannot destructure property 'notes' of 'context' as it is undefined.
at Notes (Notes.js:10: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 @ Notes.js:10
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
performConcurrentWorkOnRoot @ react-dom.development.js:25738
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533


Notes.js:10 Uncaught TypeError: Cannot destructure property 'notes' of 'context' as it is undefined.
at Notes (Notes.js:10: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 @ Notes.js:10
renderWithHooks @ react-dom.development.js:16305
mountIndeterminateComponent @ react-dom.development.js:20074
beginWork @ react-dom.development.js:21587
callCallback @ react-dom.development.js:4164
invokeGuardedCallbackDev @ react-dom.development.js:4213
invokeGuardedCallback @ react-dom.development.js:4277
beginWork$1 @ react-dom.development.js:27451
performUnitOfWork @ react-dom.development.js:26557
workLoopSync @ react-dom.development.js:26466
renderRootSync @ react-dom.development.js:26434
recoverFromConcurrentError @ react-dom.development.js:25850
performConcurrentWorkOnRoot @ react-dom.development.js:25750
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
react-dom.development.js:18687 The above error occurred in the <Notes> component:

at Notes (http://localhost:3000/static/js/bundle.js:769:68)
at RenderedRoute (http://localhost:3000/static/js/bundle.js:75599:5)
at RenderErrorBoundary 
(http://localhost:3000/static/js/bundle.js:75550:5)
at Routes (http://localhost:3000/static/js/bundle.js:76064:5)
at Router (http://localhost:3000/static/js/bundle.js:76002:15)
at RouterProvider (http://localhost:3000/static/js/bundle.js:75849:5)
at App

React will try to recreate this component tree from scratch using the error boundary you provided, RenderErrorBoundary.
logCapturedError @ react-dom.development.js:18687
hooks.tsx:550 React Router caught the following error during render TypeError: Cannot destructure property 'notes' of 'context' as it is undefined.
at Notes (Notes.js:10: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 beginWork$1 (react-dom.development.js:27426:1)
at performUnitOfWork (react-dom.development.js:26557:1)
at workLoopSync (react-dom.development.js:26466:1)
at renderRootSync (react-dom.development.js:26434:1)
at recoverFromConcurrentError (react-dom.development.js:25850:1)
at performConcurrentWorkOnRoot (react-dom.development.js:25750:1)  

相关代码 #

NoteContext.js #

import React,{createContext} from 'react'

export const NoteContext = createContext()

NoteState.js #

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

import React from 'react'
import Notes from "../../components/Notes";

export default function NoteState() {
    const notesInitial = [
    {
      "_id": "64073219511b4f062e4291d1",
      "user": "63fe0f8bbea2272fc98d6e2e",
      "title": "Fitness",
      "description": "Get ready and go for exercises at 1pm",
      "tag": "Personal, Fitness",
      "Date": "2023-03-07T12:46:17.031Z",
      "__v": 0
    },
    {
      "_id": "6407323a511b4f062e4291d3",
      "user": "63fe0f8bbea2272fc98d6e2e",
      "title": "Hello MY boy",
      "description": "its Testing time baby",
      "tag": "Fitness",
      "Date": "2023-03-07T12:46:50.803Z",
      "__v": 0
    }
  ]

  const [notes, setNotes] = useState(notesInitial)
    
  return (
    <div>
        <NoteContext.Provider value={{notes, setNotes}}>
            <Notes/>
        </NoteContext.Provider>
      
    </div>
  )
}

Notes.js #

import React from 'react'
import Navbar from './Navbar'
import { useContext } from 'react';
import { NoteContext } from '../context/notes/NoteContext';



export default function Notes() {
 const context = useContext(NoteContext)
 const {notes, setNotes} = context


  return (
    <>
 
    <h1 className='yournotes'>Your Notes</h1>
    <div className='savednote-container'>
      {notes.map((note)=>{
        return note.title;
      }
      )}
    </div>
    </>
  )
}

问题原因及解决办法 #

原因 #

报错核心是：你在路由或App组件中直接渲染了<Notes />，但该组件并未被NoteContext.Provider包裹。虽然NoteState内部用Provider包裹了<Notes />，但如果路由直接渲染<Notes />，这个组件不在Provider作用域内，useContext(NoteContext)会返回undefined，解构notes时就会抛出错误。

解决办法 #

方法一：修改路由配置，渲染NoteState组件

找到路由配置文件，将直接渲染<Notes />的代码改为渲染<NoteState />：

// 原路由代码示例：
<Route path="/notes" element={<Notes />} />

// 修改后：
<Route path="/notes" element={<NoteState />} />

NoteState内部已包含被Provider包裹的<Notes />，这样访问/notes路径时，Notes组件就能正常获取Context值。

方法二：重构NoteState为通用Provider容器（更灵活）

将NoteState改为通过children props接收子组件，让多个组件都能访问NoteContext：

// 修改后的NoteState.js
import { NoteContext } from "./noteContext";
import { useState } from "react";
import React from 'react'

export default function NoteState({ children }) {
    const notesInitial = [
    {
      "_id": "64073219511b4f062e4291d1",
      "user": "63fe0f8bbea2272fc98d6e2e",
      "title": "Fitness",
      "description": "Get ready and go for exercises at 1pm",
      "tag": "Personal, Fitness",
      "Date": "2023-03-07T12:46:17.031Z",
      "__v": 0
    },
    {
      "_id": "6407323a511b4f062e4291d3",
      "user": "63fe0f8bbea2272fc98d6e2e",
      "title": "Hello MY boy",
      "description": "its Testing time baby",
      "tag": "Fitness",
      "Date": "2023-03-07T12:46:50.803Z",
      "__v": 0
    }
  ]

  const [notes, setNotes] = useState(notesInitial)
    
  return (
    <NoteContext.Provider value={{notes, setNotes}}>
        {children}
    </NoteContext.Provider>
  )
}

然后在App.js或路由外层用NoteState包裹需要访问Context的部分：

// App.js示例
import NoteState from './path/to/NoteState'
import { Routes, Route } from 'react-router-dom'
import Notes from './components/Notes'

function App() {
  return (
    <NoteState>
      <Routes>
        <Route path="/notes" element={<Notes />} />
        {/* 其他路由 */}
      </Routes>
    </NoteState>
  )
}

export default App

这样所有被NoteState包裹的组件都能正常访问NoteContext的值，扩展性更强。

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