新手开发者咨询：如何修改购物车中特定商品的数量？

嘿，作为开发新手能独立推进项目到这一步已经超棒啦！你现在遇到的核心问题是：用单个articleQuantity state控制所有商品的数量，导致点加减按钮时所有商品数量一起变——这肯定不是你想要的效果对吧？完全不用给每个商品单独设置state，咱们换个思路就能搞定！

问题根源 #

你当前的articleQuantity是全局的单一state，所有商品都会共用这个数值，所以不管点哪个商品的加减，所有商品显示的数量都会同步变化。

最优解决方案：把数量绑定到每个商品对象 #

我们可以给每个商品对象添加一个quantity属性，然后用state维护整个商品数组，这样就能精准控制单个商品的数量了。

修改后的代码示例：

首先初始化带数量的商品数组state：

// 初始化时给每个商品默认加上quantity字段，值为1
const [basketArticles, setBasketArticles] = useState(() => 
  basketArticleTab.map(item => ({ ...item, quantity: 1 }))
);

然后更新增减数量的函数，根据商品ID定位修改：

const handleClickDecrease = (itemId) => {
  setBasketArticles(prevArticles => 
    prevArticles.map(article => 
      // 只修改目标商品的数量，最少为1
      article._id === itemId 
        ? { ...article, quantity: Math.max(1, article.quantity - 1) } 
        : article
    )
  );
};

const handleClickIncrease = (itemId) => {
  setBasketArticles(prevArticles => 
    prevArticles.map(article => 
      article._id === itemId 
        ? { ...article, quantity: article.quantity + 1 } 
        : article
    )
  );
};

最后修改购物车渲染部分，用每个商品自己的quantity值：

// 用map代替for循环，更符合React的写法，记得加key
const basket = basketArticles.map(article => (
  <Row key={article._id} className="newArticle">
    <img className='articleImg' src={article.picture} alt={article.name} />
    <h3 className="newArticleTitle">{article.name}</h3>
    <h3 className="newArticleTitle">
      <Button className="less" variant="dark" onClick={() => handleClickDecrease(article._id)}>-</Button>
      {' '}{article.quantity}{' '}
      <Button variant="dark" onClick={() => handleClickIncrease(article._id)}>+</Button>
    </h3>
    <h3 className="newArticleTitle">Price H.T</h3>
    <h3 className="newArticleTitle">{article.priceHT}</h3>
    <img 
      onClick={() => handleClickTrash(article._id)} 
      className='deleteIcon' 
      src='trash.svg' 
      alt='delete item'
    />
  </Row>
));

另一种思路：用单独的数量映射对象 #

如果不想修改原商品数组，也可以用一个对象来存储每个商品ID对应的数量：

// 初始化数量映射，key是商品ID，value是数量
const [quantityMap, setQuantityMap] = useState(() => 
  basketArticleTab.reduce((map, item) => {
    map[item._id] = 1;
    return map;
  }, {})
);

// 增减函数
const handleClickDecrease = (itemId) => {
  setQuantityMap(prevMap => ({
    ...prevMap,
    [itemId]: Math.max(1, prevMap[itemId] - 1)
  }));
};

const handleClickIncrease = (itemId) => {
  setQuantityMap(prevMap => ({
    ...prevMap,
    [itemId]: prevMap[itemId] + 1
  }));
};

// 渲染时取数量：quantityMap[article._id]

小提醒 #

推荐第一种方案，因为把商品信息和它的数量放在一起更直观，后续计算总价、处理商品删除也会更方便。另外，React里渲染列表一定要加key（用商品的_id就很合适），避免不必要的重渲染哦！

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