使用useContext获取dispatch时触发Uncaught TypeError: dispatch is not a function错误

问题场景 #

在学习使用useContext结合useReducer钩子的action/dispatch用法时，调用dispatch函数总会抛出Uncaught TypeError: dispatch is not a function错误，已排查5天。

组件中调用dispatch的代码：

// context
import { ModalContext } from "../Context/Contexts/ModalContext";
import { OPEN_IMAGE_MODAL } from "../Context/action.types";

const { dispatch } = useContext(ModalContext);

dispatch({
          type: OPEN_IMAGE_MODAL,
          payload: { isEnabled: true, imageDetails: { url: doc.url } },
});

核心错误原因 #

问题出在ModalContext.js中对useReducer返回值的解构错误：useReducer仅返回**[当前状态对象, dispatch函数]**两个元素的数组，你错误地解构出了三个变量[isEnabled, imageDetails, dispatch]，导致dispatch被赋值为undefined，自然会抛出"不是函数"的错误。

修正方案 #

修改ModalContext.js中的代码：

import { createContext, useReducer } from "react";

// reducer
import { modalReducer } from "../Reducers/modalReducer";

// components
import ImageModal from "../../Components/ImageModal";

// 创建并导出上下文
export const ModalContext = createContext();

const initialState = { isEnabled: false, imageDetails: {} };

export const ModalContextProvider = ({ children }) => {
  // 正确解构useReducer的返回值：完整状态对象 + dispatch函数
  const [state, dispatch] = useReducer(modalReducer, initialState);

  return (
    <ModalContext.Provider value={{ ...state, dispatch }}>
      {children}
      {/* 从state对象中读取isEnabled属性 */}
      {state.isEnabled && <ImageModal />}
    </ModalContext.Provider>
  );
};

关键说明 #

1. useReducer的返回值结构是固定的[state, dispatch]，你的初始状态是一个包含isEnabled和imageDetails的对象，所以第一个变量是完整的状态容器，不能直接解构出两个属性。
2. 通过...state将状态对象的属性展开到Provider的value中，组件中依然可以用const { isEnabled, imageDetails, dispatch } = useContext(ModalContext)正常获取所有值。
3. 同步修改Provider内部的条件渲染逻辑，从state.isEnabled读取状态，确保逻辑一致。

额外检查 #

确保需要使用该Context的组件（比如你的ImageGrid）确实被包裹在ModalContextProvider的子树中，否则组件无法获取到Context的值，也会引发类似错误。

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