如何实现购物车商品加购功能？新手求教addToCart方法与cartItems.push逻辑

代码逻辑与问题解析 #

原有代码设计初衷 #

这段是React框架下的购物车加购方法，原本的设计目标是两个：

• 若待加购商品已存在于购物车，对应商品的购买数量加1
• 若待加购商品不存在于购物车，新增该商品到购物车列表，初始购买数量设为1

cartItems.push(...product, count:1)的设计意图与语法错误 #

你关注的这段代码，原作者的设计意图是：
通过ES6的展开运算符...拆开product商品对象的所有属性，额外新增count:1的购买数量属性，拼接成新的购物车商品对象后插入到购物车数组末尾。

但这段写法存在直接导致运行报错的语法问题：

• 展开对象构造新对象必须用大括号{}包裹，正确的新对象写法是{...product, count: 1}，缺失大括号的情况下直接写入push方法参数，属于非法JS语法
• 缺失大括号时，...product会尝试把product作为可迭代对象拆分，若product是普通对象会直接抛出类型错误，后续的count:1也不符合参数语法规范，完全无法运行

原有代码的其他逻辑错误 #

除了上述语法问题，整段代码还存在两个逻辑错误：

• 商品匹配成功后的item++写法错误：item是商品对象，不能直接做自增运算，正确写法是修改商品的数量属性item.count += 1
• 新增商品的逻辑错误放在forEach循环内部：会导致每遍历一个已有的非匹配商品，就插入一次新商品，最终同一个新商品会被重复插入多次，新增逻辑应该放到forEach循环外，遍历完全部商品确认无匹配后再执行

修正后的可运行代码 #

addToCart = (product) => {
    let alreadyIncart = false;
    // 复制原有购物车数组，避免直接修改state
    const cartItems = this.state.cartItems.slice()
    cartItems.forEach((item) => {
      if(item.id === product.id){
        // 匹配到对应商品，数量加1
        item.count += 1;
        alreadyIncart = true;
      }
    })
    // 遍历完全部商品确认不存在，再新增商品
    if(!alreadyIncart){
      cartItems.push({...product, count: 1})
    }
    // 更新state触发视图刷新
    this.setState({ cartItems })
}

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