如何从数组中单次删除相似数据的单个项？解决同ID商品批量删除问题

你遇到的问题根源是：购物车中多个同一商品的id相同，用product.id !== id过滤时，所有匹配该id的项都会被移除，导致批量删除。

以下是两种可行的修复方法：

方法一：给购物车项添加唯一标识符（推荐） #

修改购物车项的数据结构，在添加商品时为每个项生成一个唯一的标识（比如结合时间戳和随机数，或者用uuid库生成），删除时通过这个唯一标识匹配，而不是用商品本身的id。

示例代码： #

1. 添加商品到购物车时生成唯一ID：

const addToCart = (product) => {
  // 生成唯一标识，这里用时间戳+随机数简单实现，也可以用uuid库
  const uniqueId = Date.now() + Math.random();
  setCart([...cart, { ...product, uniqueId }]);
};

2. 修改删除函数，用唯一标识过滤：

const deleteItem = (uniqueId) => {
  setCart(cart.filter(item => item.uniqueId !== uniqueId));
};

方法二：通过数组索引删除（不推荐，仅临时场景使用） #

如果不想修改购物车项结构，可以通过数组的索引来删除单个项，但要注意：当购物车项顺序变化（比如删除其他项、排序）时，索引会失效，容易出现删除错误。

示例代码： #

// 删除时传入目标项的索引
const deleteItem = (targetIndex) => {
  // 用filter保留索引不等于目标索引的项
  setCart(cart.filter((_, index) => index !== targetIndex));
  
  // 或者用splice实现（注意要创建新数组，保持不可变更新）
  // const newCart = [...cart];
  // newCart.splice(targetIndex, 1);
  // setCart(newCart);
};

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