ReactJS中查找购物车商品的方法及加购重复问题排查

触发双分支执行、重复追加的核心问题 #

你的代码没有做全局的「目标商品是否已在购物车」前置判断，直接把单个商品的匹配判断嵌进了多层遍历的回调里，导致遍历过程中同时命中true、false两个分支：

• 当前购物车cart的存储结构是按分类存的，数组每一项是一个分类对象（比如示例里的Sandwich分类），分类下的fdata才是具体商品列表
• 当重复添加已存在的商品时，执行流程完全错位：
  1. cart.forEach遍历第一个匹配的分类对象，遍历到目标商品时进入case true，完成数量自增、弹出对应提示
  2. 这个遍历流程不会在找到目标后停止：因为你用every做遍历时，回调没有设置返回值，也没有全局的“已找到”标记做拦截，遍历会继续向下执行——要么遍历到当前分类下其他不匹配的商品，要么继续遍历购物车里其他分类的对象，这些遍历到的项都不匹配目标id，就会进入case false分支，把目标商品重新拉取后追加到购物车数组末尾
• 本质上你写的switch(f.fid==id)是针对当前遍历的单个商品项做判断，不是全局的存在性校验：只要遍历到任意一个和目标id不匹配的项，就会走false分支，完全不管之前已经找到过匹配项的事实。

其他影响功能的实现问题 #

• 违反React状态更新规则：case true分支里直接执行f.count +=1，是直接修改原cart里的对象引用，哪怕后续用setCart([...cart])做浅拷贝，React也没法正确感知到状态变化
• 冗余嵌套遍历：case true分支里又嵌套了一层全购物车遍历找目标商品，和外层的遍历逻辑完全重复
• 遍历方法误用：Array.every的设计用途是校验数组所有元素是否符合条件，不适合用来做多分支的业务逻辑遍历，你没有利用它的返回值机制做中断控制，进一步放大了逻辑漏洞

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