React中如何根据ID删除数组中的元素？

你的代码无法正常运行的核心原因是类型不匹配：

• 数组中item.id是数字类型（比如1）
• 通过e.target.id获取到的是字符串类型（比如"1"）
• 数字和字符串用!==比较时会返回true，导致过滤条件不生效，目标元素不会被删除

修正后的代码 #

const removeCartItem = (e) => {
    e.preventDefault();
    // 将获取到的id转为数字类型，与数组中item.id的类型统一
    const id = Number(e.target.id);
    setCart(prevCart => 
        prevCart.filter(item => item.id !== id)
    );
}

额外注意事项 #

• 你提供的初始购物车数据里两个元素的id都是1，这会导致调用删除函数时两个元素都会被过滤掉，建议确保每个商品的id唯一
• 绑定事件时要确保触发元素的id属性确实设置为对应商品的id值，比如按钮标签要这么写：

  <button id={item.id} onClick={removeCartItem}>删除</button>
  

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