JS数组filter删除指定ID+尺寸颜色商品时误删同ID条目原因

你的过滤逻辑有3个核心错误，直接导致了同ID商品被全部删除的问题：

• 首先是核心判断逻辑完全写反
  filter方法只会保留回调返回true的元素，返回false的元素会被删除。你的需求是「仅当product_id、size、color三个字段全部和payload匹配时才删除」，也就是保留规则是：只要三个字段有任意一个不匹配，就保留当前元素。
  你现在用&&连接三个不等判断，等价于强制要求「id不等、颜色不等、尺寸不等三个条件同时满足，才保留元素」。只要其中任意一个条件不成立（比如测试的两个商品id都和payload的id相等，第一个判断直接为false），整个&&表达式就会短路返回false，元素直接被过滤掉，这就是两个同ID商品全被删的根本原因。
• 其次是字段名/访问路径写错
  你给出的商品数据结构里，商品ID的字段名是product_id，不是id；如果遍历的el本身就是购物车商品对象，你多写了一层.products访问，根本取不到正确的ID和options值，取到的全是undefined。
• 最后是可选链写的不完整
  你只在products后面加了可选链?.，如果options是空数组，options[0]的值是undefined，直接访问.color和.size会直接抛错。

state.cart = state.cart.filter(el => {
  // 注意字段路径要和你的实际数据结构对齐，如果el外层包了products字段就补全路径
  const currentProductId = el.product_id;
  const currentOption = el.options?.[0];
  // 三个字段全匹配时返回false（删除），其余情况全部返回true（保留）
  return !(
    currentProductId === action.payload.id &&
    currentOption?.color === action.payload.options[0].color &&
    currentOption?.size === action.payload.options[0].size
  )
})

注意：如果你的商品options数组可能存在多个规格选项，不要写死取[0]，要根据实际业务规则遍历options匹配对应规格，避免匹配错误。

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