使用useContext与useReducer时dispatch非函数错误求助

核心错误原因 #

1. 上下文嵌套与依赖倒置：StateContextProvider内部调用了useCartReducer()，但该组件并未被CartStateContext.Provider包裹，导致useCartReducer()返回CartStateContext的默认值null，尝试从null中获取dispatch自然触发dispatch is not a function错误。同时ReducerProvider依赖StateContextProvider的状态，而StateContextProvider又试图获取ReducerProvider的dispatch，形成循环依赖。
2. Reducer逻辑违背设计初衷：reducer函数中直接调用外部的updateCart、addToCart修改状态，没有让useReducer承担状态管理的职责，逻辑混乱。

修复方案 #

方案一：合并上下文，用useReducer统一管理状态 #

将两个上下文的逻辑合并，用useReducer统一处理购物车状态和操作，简化结构：

import React, { createContext, useContext, useReducer } from 'react';

const CartContext = createContext(null);

// 统一处理购物车状态的reducer
const cartReducer = (state, action) => {
  switch (action.type) {
    case "ADD": {
      const { payload, quantity } = action;
      const existingIndex = state.cartItems.findIndex(item => item.id === payload.id);
      if (existingIndex !== -1) {
        // 更新已有商品数量
        const updatedItems = [...state.cartItems];
        updatedItems[existingIndex] = {
          ...updatedItems[existingIndex],
          quantity: updatedItems[existingIndex].quantity + quantity
        };
        return { ...state, cartItems: updatedItems };
      } else {
        // 添加新商品
        return {
          ...state,
          cartItems: [...state.cartItems, { ...payload, quantity }]
        };
      }
    }
    case "REMOVE": {
      const updatedItems = state.cartItems.filter((_, idx) => idx !== action.payload);
      return { ...state, cartItems: updatedItems };
    }
    case "INCREASE_QTY":
      return { ...state, quantity: state.quantity + 1 };
    case "DECREASE_QTY":
      return { ...state, quantity: Math.max(1, state.quantity - 1) };
    default:
      return state;
  }
};

export default function CartProvider({ children }) {
  const initialState = {
    quantity: 1,
    cartItems: []
  };

  const [state, dispatch] = useReducer(cartReducer, initialState);

  // 封装添加商品的逻辑
  const onAddClick = (product, button) => {
    dispatch({ type: "ADD", payload: product, quantity: state.quantity });
    if (button.toLowerCase() === "buy now") {
      // 这里可添加跳转购物车等逻辑
    }
  };

  // 封装移除商品的逻辑
  const handleRemoveCart = (index) => {
    dispatch({ type: "REMOVE", payload: index });
  };

  return (
    <CartContext.Provider value={{
      ...state,
      onAddClick,
      handleRemoveCart,
      increaseQty: () => dispatch({ type: "INCREASE_QTY" }),
      decreaseQty: () => dispatch({ type: "DECREASE_QTY" })
    }}>
      {children}
    </CartContext.Provider>
  );
}

export const useCart = () => useContext(CartContext);

使用方式：在App根组件中包裹所有需要购物车功能的组件：

import CartProvider from './CartProvider';

function App() {
  return (
    <CartProvider>
      {/* 你的应用组件 */}
    </CartProvider>
  );
}

方案二：调整上下文嵌套顺序，分离逻辑 #

如果不想合并上下文，可按以下步骤修复：

1. 调整组件嵌套顺序
   确保ReducerProvider在StateContextProvider内部，让ReducerProvider能获取到StateContext的状态：

// App.js
import StateContextProvider from './StateContextProvider';
import ReducerProvider from './ReducerProvider';

function App() {
  return (
    <StateContextProvider>
      <ReducerProvider>
        {/* 所有需要调用dispatch的子组件放在这里 */}
      </ReducerProvider>
    </StateContextProvider>
  );
}

2. 修改StateContextProvider
   移除内部对useCartReducer()的调用，将dispatch的调用移到子组件中：

// StateContextProvider.js
import React, { createContext, useContext, useState } from 'react'

export const StateContext = createContext()

export default function StateContextProvider({children}) {
    const [quantity, setQuantity] = useState(1)
    const [cartItems, setCartItems] = useState([])

    const increaseQty = () => {
      setQuantity(prevState => prevState + 1)
    }
    const decreaseQty = () => {
      setQuantity(prevState => Math.max(1, prevState - 1))
    }
    const updateCart = (products) => {
      setCartItems(products)
    }
    const addToCart = (product) => {
      setCartItems([...cartItems, {...product}])
    }
    
  return (
    <StateContext.Provider value={{
        cartItems, 
        updateCart,
        addToCart,
        quantity,
        increaseQty,
        decreaseQty,
    }}>
        {children}
    </StateContext.Provider>
  )
}
export const useStateContext = () => useContext(StateContext)

3. 在子组件中调用dispatch
   在需要操作购物车的子组件中同时引入两个上下文：

// 示例子组件
import { useStateContext } from './StateContextProvider';
import { useCartReducer } from './ReducerProvider';

function ProductCard({ product }) {
  const { quantity } = useStateContext();
  const { dispatch } = useCartReducer();

  const handleAdd = (button) => {
    dispatch({ type: "ADD", payload: product, quantity });
    if (button.toLowerCase() === "buy now") {
      // 处理立即购买逻辑
    }
  };

  const handleRemove = (index) => {
    dispatch({ type: "REMOVE", index });
  };

  return (
    // 组件UI内容
  );
}

4. 修复Reducer逻辑
   让reducer返回新状态并同步到外部cartItems：

// ReducerProvider.js
import React, { createContext, useContext, useReducer } from 'react';
import { useStateContext } from './StateContextProvider';

const CartStateContext = createContext(null);

export default function ReducerProvider({children}) {
    const { cartItems, updateCart, quantity } = useStateContext();
    
    const reducer = (state, action) => {
        switch(action.type) {
          case "ADD": {
            const existingProduct = state.find(item => item.id === action.payload.id);
            if(existingProduct){
              const updatedCart = state.map(cartItem => 
                cartItem.id === action.payload.id 
                  ? { ...cartItem, quantity: cartItem.quantity + action.quantity }
                  : cartItem
              );
              updateCart(updatedCart);
              return updatedCart;
            } else {
              const newItem = {...action.payload, quantity: action.quantity};
              updateCart([...state, newItem]);
              return [...state, newItem];
            }
          }
          case "REMOVE": {
            const updatedCart = state.filter((_, idx) => idx !== action.index);
            updateCart(updatedCart);
            return updatedCart;
          }
          default:
            return state;
        }
    }

    const [state, dispatch] = useReducer(reducer, cartItems);

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

export const useCartReducer = () => useContext(CartStateContext);

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