React如何实现购物车禁止重复添加商品 修复去重逻辑失效问题

你的代码拦截失效是3个核心逻辑错误导致的：

• 遍历购物车时误用map做存在性判断：只要遍历到任意一个和当前商品不重复的项，就会触发一次添加逻辑。比如购物车有A、B两件不同商品，你重复加A时，遍历到A会弹重复提示，但遍历到B时因为B和A名称不匹配，就会直接把A加入购物车，这就是多商品场景下拦截失效的直接原因
• if ([...this.state.cart])判断永远成立：数组是引用类型，哪怕是空数组，转布尔值结果也是true，根本无法识别空购物车场景，对应的else分支永远不会执行
• setState写法不符合规范：直接在setState内给this.state.cart赋值，会触发不可预期的状态更新异常，还可能导致重复渲染

addToCart = (id) => {
  const item = this.getItem(id);
  // 遍历校验是否存在同名商品，只要有一个匹配项就判定为重复
  const isItemExist = this.state.cart.some(cartItem => cartItem.product_name === item.product_name);

  if (isItemExist) {
    alert("Item is already in cart");
    return;
  }
  // 确认无重复后再追加商品，用标准函数式写法更新状态
  this.setState(prevState => ({
    cart: [...prevState.cart, item]
  }), () => {
    // 状态更新是异步的，放在setState回调里才能拿到最新的购物车数据
    console.log(this.state.cart);
  });
};

• 用Array.some()替代map做重复校验：该方法只要遍历到一个匹配项就会返回true并终止遍历，不会出现遍历到其他非重复商品就误触发添加的问题
• 校验到重复后直接return终止后续逻辑，不会走到商品添加分支
• 采用setState函数式更新写法，基于更新前的最新状态prevState计算新购物车数组，避免批量更新时的状态不同步问题
• 把日志打印放在setState回调里，解决异步更新导致打印值和实际状态不一致的问题

内容的提问来源于stack exchange，提问作者Hamza Mukhtar bscs-19-09