未捕获的 TypeError：调度不是函数

问：

尝试在窗口上执行调度操作时，我遇到此错误：。我正在研究 react 上下文 API 而不是 redux。"Uncaught TypeError: dispatch is not a function at removeFromCart (CheckoutProduct.js:11:1)"

这是我的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;

这是我的 ./StateProvider.js 图像对不起图像代码，系统不允许我添加代码 ./StateProvider.js 忽略这部分，这是为了系统不允许我发布代码 nafoiajijaijfajnvnaijijakjlskcadlkcjdnvdnvvanlkcnchchhchchcjjdndjkancjndolnhclhndvjsdcecfohfkflkjkljflkjfoiajflandfnduhdvjnvndvdojdnfanfofnavnoavanvnrjsflsjfslfjsfjovonkvkjsvlkjavlkjaldkvjlksvldkvdnv