如何在 React 中添加特定项目的数量

Question

我有一个像这样的数组

const products = [
  { id: 1, name: "Apple", price: 10, img: "apple.jpg" },
  { id: 2, name: "Banana", price: 20, img: "banana.jpg" },
  { id: 3, name: "Cherry", price: 30, img: "cherry.jpg" }
];

const [cartItem, setCartItem] = usestate([])

const [quantity, setQuantity] = useState(1)

    const handleAdd = () => {
        setQuantity(quantity + 1)
    }

    const handleReduce = () => {
        setQuantity(quantity - 1)
    }

 <div>
            {cartItem.map((item) => {
                return(
                    <div>
                        <button onClick={()=>handleAdd()}>ADD</button>
                        <img src={item.IMG} alt="" />
                        <h3 className="name">{item.product}</h3>
                        <p className="price">{item.price}</p>
                        <p className="quantity">{quantity}</p>
                        <button onClick={()=>handleReduce()}>REMOVE</button>
                    </div>
                )
            })}
        </div>

当我将产品数组中的对象添加到 cartItem 并渲染它时，我从 cartItem 中获得了一些元素。我想知道如何添加和减少特定项目的数量

import { useState } from "react";
import products from "./src/components/products";

const Cart = () => {

const [cartItem, setCartItem] = usestate([])

*The cartItem was a context*


    const [quantity, setQuantity] = useState(1)

    const handleAdd = () => {
        setQuantity(quantity + 1)
    }

    const handleReduce = () => {
        setQuantity(quantity - 1)
    }

  return(
    <>
        <div>
            {cartItem.map((item) => {
                return(
                    <div>
                        <button onClick={()=>handleAdd()}>ADD</button>
                        <img src={item.IMG} alt="" />
                        <h3 className="name">{item.product}</h3>
                        <p className="price">{item.price}</p>
                        <p className="quantity">{quantity}</p>
                        <button onClick={()=>handleReduce()}>REMOVE</button>
                    </div>
                )
            })}
        </div>

    </>
  )
};

export default Cart

我一直在尝试这样的事情，但是当我单击“添加”按钮时，它不是添加特定元素，而是添加所有元素的数量

请帮忙，我对 React 很陌生

Answer 1

如果您想更新特定购物车商品的数量，那么您不能使用单个

quantity

状态。当项目/产品从

cartItem

数组添加到

products

数组状态时，您应该向每个可以单独修改的项目/产品对象添加

quantity

属性。

cartItem

数组中的示例项目：

{
  id: 1,
  name: "Apple",
  price: 10,
  img: "apple.jpg",
  quantity: 1, // <-- added quantity property
}

import { useState } from "react";
import products from "./src/components/products";

const Cart = () => {
  const [cartItems, setCartItems] = useState([]);

  const handleAdd = (itemId) => {
    setCartItems(cartItems => cartItems.map(
      item => item.id === itemId
        ? { ...item, quantity: item.quantity + 1 }
        : item
    ));
  };

  const handleReduce = (itemId) => {
    setCartItems(cartItems => cartItems.map(
      item => item.id === itemId
        ? { ...item, quantity: Math.max(1, item.quantity - 1) }
        : item
    ));
  };

  return (
    <div>
      {cartItems.map((item) => (
        <div key={item.id}>
          <button onClick={() => handleAdd(item.id)}>ADD</button>
          <img src={item.IMG} alt="" />
          <h3 className="name">{item.product}</h3>
          <p className="price">{item.price}</p>
          <p className="quantity">
            {item.quantity} {/* <-- specific item's quantity */}
          </p>
          <button onClick={() => handleReduce(item.id)}>REMOVE</button>
        </div>
      ))}
    </div>
  );
};