将商品添加到购物车时出现 typeError

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;

这些代码来自购物车-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,
}

将商品添加到购物车时出现 typeError

Getting typeError while adding item to cart

reactjs

react-context