未捕获的类型错误：调度不是 function

Question

我在尝试对 window 执行调度操作时遇到此错误： "Uncaught TypeError: dispatch is not a function at removeFromCart (CheckoutProduct.js:11:1)" 。 我正在处理反应上下文 API 而不是 redux。

这是我的 CheckoutProduct.js 代码

import "./CheckoutProduct.css";
import { useStateValue } from "./StateProvider";

function CheckoutProduct({ id, title, image, price, rating }) {
  const [dispatch] = useStateValue();

  console.log(id, title, image, price, rating);

  const removeFromCart = () => {
    dispatch({
      type: "REMOVE_FROM_CART",
      id: id,
    });
  };

  return (
    <div className="checkoutProduct">
      <img className="checkoutProduct__image" src={image} alt="" />

      <div className="checkoutProduct__info">
        <p className="checkoutProduct__title">{title}</p>

        <p className="checkoutProduct__price">
          <small>₹</small>
          <strong>{price}</strong>
        </p>

        <div className="checkoutProduct__rating">
          {Array(rating)
            .fill()
            .map((_, i) => (
              <p>⭐</p>
            ))}
        </div>

        <button onClick={removeFromCart}>Remove from Cart</button>
      </div>
    </div>
  );
}

export default CheckoutProduct;

这是我的 reducer.js 代码

  cart: [
    {
      id: "12345",
      title: "Versace T-Shirt",
      price: 4999,
      image:
        "https://www.versace.com/dw/image/v2/ABAO_PRD/on/demandware.static/-/Sites-ver-master-catalog/default/dw5f8ee257/original/90_E73GAHT11-ECJ00T_E899_16_PieceNumberLogoT-Shirt-T-shirtsandPolos-versace-online-store_0_2.jpg?sw=450&sh=632&sm=fit&sfrm=jpg&cksizes=380w",
      rating: 3,
    },
    {
      id: "12345",
      title: "Versace T-Shirt",
      price: 4999,
      image:
        "https://www.versace.com/dw/image/v2/ABAO_PRD/on/demandware.static/-/Sites-ver-master-catalog/default/dw5f8ee257/original/90_E73GAHT11-ECJ00T_E899_16_PieceNumberLogoT-Shirt-T-shirtsandPolos-versace-online-store_0_2.jpg?sw=450&sh=632&sm=fit&sfrm=jpg&cksizes=380w",
      rating: 3,
    },
  ],
  user: null,
};

const reducer = (state, action) => {
  console.log(action);
  switch (action.type) {
    case "ADD_TO_CART":
      return {
        ...state,
        cart: [...state.cart, action.item],
      };
    case "REMOVE_FROM_CART":
      let newCart = [...state.cart];

      const index = state.cart.findIndex(
        (cartItem) => cartItem.id === action.id
      );

      if (index >= 0) {
        //remove
        newCart.splice(index, 1);
      } else {
        console.warn(
          `Can't remove product (id: ${action.id} as its not in cart)`
        );
      }
      return {
        ...state,
        cart: newCart,
      };
    default:
      return state;
  }
};

export default reducer;

This is my./StateProvider.js Image Sorry for the image code, the system is not letting me add code ./StateProvider.js Ignore this part, it's for the system which is not letting me post code nafoiajijaijfajnvnaijijakjlskcadlkcjdnvdnvvanlkcncnchchhchchchcjjdndjkancjndolnhclhndvjsdcecfohfkflkjkljflkjfoiajflandfnduhdvjnvndvdojdnfanfofnavnoavanvnrjsflsjfslfjslfjsfjovonkvkjsvlkjavlkjaldkvjlksvldkvdnv

Answer 1

useReducer返回带有两个 arguments 的数组

1. state
2. 调度 function

你被命名为你的state变量 - dispatch并尝试运行它

你想这样做：

const [,dispatch] = useStateValue();

Answer 2

因为这是 React 上下文 API 而不是 redux。 这可能不适合你。 但下面的代码对我有用。 在 CheckoutProduct.js 中

  const [{ cart }, dispatch] = useStateValue();

  console.log(cart);

  const removeFromCart = () => {
    dispatch({
      type: "REMOVE_FROM_CART",
      id: id,
    });
  };...```