React处理复杂状态最佳实践：购物车商品数量更新

你现在的实现有几个明显的错误，完全不符合React状态更新的规范：

• 直接突变原状态：找到目标商品对象后直接修改quantity属性，属于直接修改state本身，React靠浅比较识别状态变化，这种写法不会稳定触发重渲染
• 没有创建新的数组引用：const newCart = items只是给原数组起了个别名，根本不是新数组，后续的push操作本质还是在改原数组
• 逻辑冗余还会产生脏数据：你本来就已经从数组里拿到了目标元素，再把它push回数组，会直接导致id为2的商品重复出现在购物车里
• 字段名不匹配：你初始定义的商品id字段是_id，判断条件写的是item.id，根本匹配不到目标商品

React更新数组、对象这类引用类型状态的核心原则是不可变更新：绝对不要直接修改原状态的内容，要返回一个全新的引用，只在新引用里修改你需要调整的部分。
修改购物车指定商品数量最简洁规范的写法是用数组的map方法实现，代码如下：

// 建议把setcart改成小驼峰setCart，符合React通用命名规范
setCart(items => 
  items.map(item => 
    item._id === "2"
      ? {...item, quantity: 5} // 匹配到目标商品，创建新对象覆盖数量字段
      : item // 其余商品不需要改动，直接返回原引用即可
  )
)

这个写法的优势很明显：

• 全程没有修改原数组、原对象的任何属性，完全符合不可变更新要求，React能准确识别状态变化触发重渲染
• 不会产生重复商品，map是按原数组长度一一映射，结构和原购物车完全一致
• 逻辑简洁，没有多余的查找、插入操作
• 性能更好，非目标商品不需要额外拷贝，复用原引用即可，浅比较的开销极低

• 不要用push/splice/sort这类会直接修改原数组的方法操作state，优先用map/filter/展开运算符这类返回新数组的方法
• 哪怕你浅拷贝了数组，也不要直接修改数组里的原对象，嵌套的引用类型也要做新对象拷贝，否则依然属于状态突变
• 注意字段名和初始定义保持一致，不要出现_id和id混用的低级错误

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