React中如何单独修改购物车特定商品的数量

问题描述 #

我有如下products数组：

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" }
];

将商品添加至作为Context的cartItem后，我用全局quantity状态实现增减按钮，但点击时会修改所有商品的数量。作为React新手，我想知道如何单独修改购物车中特定商品的数量，我的代码如下：

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

核心问题 #

你当前使用的是全局quantity状态，所有商品共享同一个数量值，导致点击按钮时所有商品数量同步变化。正确的思路是让购物车中的每个商品单独携带quantity字段，各自管理数量。

修改步骤 #

1. 调整cartItem结构
   购物车中的每个项需要包含商品基础信息，再加上专属的quantity字段。比如添加商品到购物车时，结构应为{ ...product, quantity: 1 }；若商品已存在，则直接增加对应项的quantity值。

2. 重构增减数量函数
   让handleAdd和handleReduce接收商品id作为参数，通过id定位购物车中对应的商品，修改其quantity值。注意要返回新数组更新状态，避免直接修改原数据。

3. 修正渲染逻辑
   渲染时不再使用全局quantity，而是读取每个商品项自身的item.quantity。

修改后的完整代码 #

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

const Cart = () => {
  // 注：实际项目中请从Context中获取cartItem，此处保留原注释逻辑
  const [cartItem, setCartItem] = useState([]);

  // 增加指定商品数量
  const handleAdd = (productId) => {
    setCartItem(prevItems => 
      prevItems.map(item => 
        item.id === productId 
          ? { ...item, quantity: item.quantity + 1 } 
          : item
      )
    );
  };

  // 减少指定商品数量（数量不小于1）
  const handleReduce = (productId) => {
    setCartItem(prevItems => 
      prevItems.map(item => 
        item.id === productId && item.quantity > 1 
          ? { ...item, quantity: item.quantity - 1 } 
          : item
      )
    );
  };

  // 示例：添加商品到购物车的逻辑
  const addToCart = (product) => {
    setCartItem(prevItems => {
      const existingItem = prevItems.find(item => item.id === product.id);
      if (existingItem) {
        // 商品已存在则增加数量
        return prevItems.map(item => 
          item.id === product.id 
            ? { ...item, quantity: item.quantity + 1 } 
            : item
        );
      } else {
        // 商品不存在则新增，默认数量为1
        return [...prevItems, { ...product, quantity: 1 }];
      }
    });
  };

  return (
    <>
      <div>
        {cartItem.map((item) => (
          <div key={item.id}> {/* 列表项必须添加唯一key */}
            <button onClick={() => handleAdd(item.id)}>ADD</button>
            <img src={item.img} alt={item.name} /> {/* 修正属性名：匹配products数组的img字段 */}
            <h3 className="name">{item.name}</h3> {/* 修正属性名：匹配products数组的name字段 */}
            <p className="price">{item.price}</p>
            <p className="quantity">{item.quantity}</p> {/* 使用商品自身的quantity */}
            <button onClick={() => handleReduce(item.id)}>REMOVE</button>
          </div>
        ))}
      </div>
    </>
  );
};

export default Cart;

额外注意事项 #

• 渲染列表时必须添加key属性，使用商品id作为值，避免React渲染警告。
• 修正了原代码中属性名不匹配的问题：比如item.IMG改为item.img，item.product改为item.name。
• 如果cartItem是通过Context管理的全局状态，建议将数量修改逻辑放到Context的Provider中，确保所有组件能共享购物车状态和操作方法。

内容的提问来源于stack exchange，提问作者callmecua