React+MERN项目添加Context与Hooks后出现Uncaught TypeError求助

错误核心原因 #

你的useWorkoutsContext自定义Hook没有返回获取到的context对象，调用这个Hook时默认返回undefined，尝试解构undefined的workouts属性就会抛出TypeError。

修复代码 #

修改useWorkoutsContext.js，在函数末尾返回context：

import { WorkoutsContext } from "../context/WorkoutsContext"
import { useContext } from "react"

export const useWorkoutsContext = () => {
    const context = useContext(WorkoutsContext)

    if(!context) {
        throw Error('useWorkoutsContext must be used inside an WorkoutcontextProvider')
    }
    // 添加返回语句，将context对象抛出供组件使用
    return context
}

额外检查点 #

• 确保WorkoutsContext.Provider的value属性包含workouts和dispatch，示例如下：

// WorkoutsContext.js 示例代码
import { createContext, useReducer } from 'react'

export const WorkoutsContext = createContext()

// 假设你定义了对应的reducer函数
const workoutsReducer = (state, action) => {
  switch(action.type) {
    case 'SET_WORKOUTS':
      return { workouts: action.payload }
    default:
      return state
  }
}

export const WorkoutsContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(workoutsReducer, {
    workouts: null
  })

  return (
    <WorkoutsContext.Provider value={{ workouts: state.workouts, dispatch }}>
      { children }
    </WorkoutsContext.Provider>
  )
}

• 确认WorkoutsContextProvider已经包裹了Home组件所在的层级，比如在根组件中：

import { WorkoutsContextProvider } from './context/WorkoutsContext'
import Home from './pages/Home'

function App() {
  return (
    <WorkoutsContextProvider>
      <Home />
    </WorkoutsContextProvider>
  )
}

内容的提问来源于stack exchange，提问作者sawe onwong'a peter