将商品添加到购物车时出现类型错误

Question

这几行代码来自 MealItem.js

import MealItemForm from "./MealItemForm";
import classes from "./MealItem.module.css";
import { useContext } from "react";
import CartContext from "../../../store/cart-context";

const MealItem = props => {

    const cartCtx = useContext(CartContext);
    
    const price = `INR ${props.price.toFixed(2)}`;
    
    const addToCartHandler = amount => {
        cartCtx.addItem({
            id: props.id,
            name: props.name,
            amount: amount,
            price: props.price
        });
    };
    return <li className={classes.meal}>
                <div>
                    <h3>{props.name}</h3>
                    <div className={classes.description}>{props.description}</div>
                    <div className={classes.price}>{price}</div>
                    </div>
                <div>
                    <MealItemForm onAddToCart={addToCartHandler} />
                </div>
            </li>
};

export default MealItem;

这些代码来自cart-context.jsx

import React from "react";

const CartContext = React.createContext({
    items: [],
    totalAmount: 0,
    addItem: (item) => {},
    removeItem: (id) => {}
});

export default CartContext;

如您所见，我在 const CartContext 中有一个名为 addItem 的函数，但是当我尝试访问它时，会出现错误

Answer 1

我的猜测是您没有呈现 Context Provider，请参阅 useContext API docs examples。

<CartContext.Provider value={yourContextValues}>
  <MealItem/>
</CartContext.Provider>

更新： 您在 addItem

中有一个错字

const cartContext = {
  ...
  // Should be addItem
  adddItem: addItemToCartHandler,
}

Answer 2

在您的 CartProvider.js 中，您有一个拼写错误，即 adddItem。它应该是 addItem。 其余一切正常！