React电商项目：单商品数量操作引发全部商品数量同步变化问题

你当前代码里所有商品共用了同一个itemCount状态变量——不管点击哪个商品的「+」「-」，修改的都是这个全局状态，自然所有商品的数量会同步变化。

这里提供两种可行的实现方式：

方式一：用对象存储每个商品的独立数量 #

把状态改成以商品id为键、数量为值的对象，这样每个商品的数量都单独维护，增减时针对对应id修改即可。

修改后的完整代码：

import React, { useState } from 'react';

const products = [
  { id: 1, clothe: 'pant' },
  { id: 2, clothe: 'shirt' },
  { id: 3, clothe: 'coat' },
];

const Cart = () => {
  // 初始化每个商品的数量为0
  const [itemCounts, setItemCounts] = useState(
    products.reduce((acc, item) => ({ ...acc, [item.id]: 0 }), {})
  );

  const increaseItem = (id) => {
    setItemCounts(prev => ({ ...prev, [id]: prev[id] + 1 }));
  };
  const decreaseItem = (id) => {
    setItemCounts(prev => ({ 
      ...prev, 
      [id]: prev[id] > 0 ? prev[id] - 1 : 0 // 避免数量为负数
    }));
  };

  return (
    <div>
      {products.map((item) => (
        <div key={item.id}> {/* 必须加key，避免React渲染警告 */}
          <div> {item.clothe} </div>
          <button onClick={() => increaseItem(item.id)}>+</button>
          <span>{itemCounts[item.id]}</span>
          <button onClick={() => decreaseItem(item.id)}>-</button>
        </div>
      ))}
    </div>
  );
};

export default Cart;

关键改动点：

• 状态从单个数字itemCount改为对象itemCounts，每个商品id对应自己的数量
• 增减函数接收商品id参数，通过函数式更新（prev => ...）确保拿到最新状态
• 给map渲染的元素加上key={item.id}，符合React列表渲染规范
• 增加了数量下限判断，避免出现负数

方式二：抽离独立的商品组件 #

把单个商品的渲染和状态管理抽成独立组件，每个组件实例自己维护数量状态，天然隔离互不影响。

修改后的代码：

import React, { useState } from 'react';

const products = [
  { id: 1, clothe: 'pant' },
  { id: 2, clothe: 'shirt' },
  { id: 3, clothe: 'coat' },
];

// 独立的商品组件
const ProductItem = ({ product }) => {
  const [count, setCount] = useState(0);

  const increase = () => setCount(prev => prev + 1);
  const decrease = () => setCount(prev => prev > 0 ? prev -1 : 0);

  return (
    <div>
      <div>{product.clothe}</div>
      <button onClick={increase}>+</button>
      <span>{count}</span>
      <button onClick={decrease}>-</button>
    </div>
  );
};

const Cart = () => {
  return (
    <div>
      {products.map(item => <ProductItem key={item.id} product={item} />)}
    </div>
  );
};

export default Cart;

这种方式更符合React组件化的思想，后续如果要给商品添加更多交互逻辑，直接在ProductItem里修改即可，代码更易维护。

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