React/NextJS实现购物车已存在商品数量加1的状态更新

你的代码存在几个基础错误，先逐一列出来：

• 拼写错误：属性名legnth拼写错误，正确写法是length
• 状态类型不匹配：cartItems初始化是数组类型，后续更新时你传入的是对象结构{...cartItems}，会直接导致状态结构混乱
• map方法使用逻辑错误：map会返回全新数组，你没有接收这个返回值；且内部返回{product, qty: 2}会生成嵌套结构，不是直接更新原商品的qty属性
• 数量写死：硬编码qty为2无法实现每次添加都累加1的需求，同时你也没补全商品不存在时新增到购物车的逻辑
• 冗余判断：不需要单独判断购物车是否为空，数组的遍历、查找方法对空数组可以正常执行，不会抛出错误

正确实现逻辑非常直接，不需要绕弯：

1. 先校验待添加的商品ID是否已经在购物车中存在
2. 若存在：遍历购物车生成新数组，匹配到对应ID的商品时，在原有qty值基础上加1，其余商品原样返回
3. 若不存在：展开原有购物车数组，追加新的商品条目，初始qty设为1即可

可直接运行的代码如下：

// 购物车状态，始终保持数组类型
const [cartItems, setCartItems] = useState([{id: 123, title: 'The Best', price: 55, qty: 1}])

const handleCartUpdate = (id, title, price) => {
  // 校验商品是否已在购物车
  const itemExisted = cartItems.some(item => item.id === id)

  if (itemExisted) {
    // 已存在则数量累加，返回新数组不修改原状态
    setCartItems(
      cartItems.map(product => 
        product.id === id 
          ? {...product, qty: product.qty + 1} 
          : product
      )
    )
  } else {
    // 不存在则新增商品条目
    setCartItems([
      ...cartItems,
      {id, title, price, qty: 1}
    ])
  }
}

几个开发注意点：

• React状态更新遵循不可变原则，不要直接修改原state里的数组/对象，必须生成新的引用传入set方法，否则React无法检测到状态变化触发重渲染
• 相等判断优先用严格相等符===，避免隐式类型转换导致的ID匹配错误
• 如果后续需要支持自定义添加数量（比如用户直接选3件加购），只需要把累加逻辑里的+1替换成你传入的qty参数，新增条目的qty也对应替换即可，不需要改动整体逻辑

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