React中更新购物车数组匹配项amount属性的两种方案差异及计数异常问题解析

问题背景 #

我正在React项目中开发购物车功能，需求是点击「iterate」按钮后，更新cart数组中与点击项匹配的对象的amount属性：如果商品已在购物车就增加数量，不在则添加进购物车。

我的初始实现方案如下，但运行后发现amount属性每次会递增2（计数翻倍）：

setCart((cart) => {
  const itemMatch = cart.find((cartItem) => cartItem.name === item.name);
  if (itemMatch !== undefined) {
    itemMatch.amount = itemMatch.amount + 1;
  } else {
    cart.push(item);
  }
  return [...cart];
})

于是我改用了第二种方案，这个方案可以正常工作，但我无法理解两种方案之间的差异，希望有人帮忙解释其中的原理：

setCart((cart) => {
  const updatedCart = cart.map((cartItem) => {
    if (cartItem.name === item.name) {
      return {...cartItem, amount: cartItem.amount + item.amount}
    } else {
      return cartItem
    }
  })
  return updatedCart;
})

两种方案的核心差异解析 #

1. 第一种方案违反了React的「状态不可变性」原则

React的状态（比如这里的cart）是不可直接修改的——状态本质上是快照，你应该基于旧快照创建新状态，而不是修改旧快照本身。

你的第一种方案里：

• cart.find(...)拿到的itemMatch是原状态数组中对象的引用，直接修改itemMatch.amount等同于修改了原状态里的对象。
• 虽然最后返回了[...cart]创建了新数组，但数组里的对象还是原来的引用，这并没有真正创建一个全新的状态。

这种操作会导致两个关键问题：

• 如果你的组件运行在React Strict Mode下，React会刻意调用两次状态更新函数来检测副作用。第一次修改了原对象的amount，第二次调用时又会基于已经修改过的原对象再+1，最终就出现了计数翻倍的情况。
• 另外，如果有其他依赖cart状态的逻辑，也会因为原状态被意外修改而出现奇怪的bug。

2. 第二种方案严格遵循了不可变更新原则

第二种方案的正确之处在于：

• 使用map创建了一个全新的数组，而不是修改原数组。
• 对于需要更新的商品项，通过扩展运算符{...cartItem, amount: cartItem.amount + item.amount}创建了一个新的对象，完全没有碰原状态里的任何对象。

这样每次状态更新都是基于旧状态的快照来计算新状态，既保证了React能正确检测到状态变化（新数组+新对象的引用都变了），也避免了因为修改原状态导致的重复更新问题，所以计数能正常递增。

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