React购物车删单个商品时全量移除，为什么addCart需用{...p}而非直接传p

核心原因：JavaScript引用类型的比较规则 #

JavaScript中的对象属于引用类型，变量存储的是对象在内存中的地址，而非对象本身的内容，两个对象的===/!==比较判断的是内存地址是否相同，和对象内容无关。

你两种写法的本质差异：

• 直接写setCart([...cart, p])：往购物车数组中添加的是Products组件内products状态数组中原有对象的内存引用，同一个商品无论点击多少次加入购物车，添加的都是同一个内存地址的引用
• 写setCart([...cart, {...p}])：基于原有p对象的内容浅拷贝创建了一个全新的对象，新对象和原p内容完全一致，但内存地址完全独立，每次加入购物车都会生成新的独立对象

删除功能异常的原因 #

你的删除逻辑用了引用比较：setCart(cart.filter(i => i !== p))
如果添加时直接传原对象p，假设你多次添加同一个商品到购物车，购物车数组中会存储多个指向同一个内存地址的引用，调用删除方法时，所有和传入p地址相同的条目都会被过滤掉，就会出现点一次删除就删掉所有同商品条目的问题。
而如果添加时每次都生成新的{...p}对象，购物车中每个条目都是独立的内存地址，删除时只会匹配到你点击的那个对应条目，只会删掉选中的单个商品。

更稳妥的优化方案 #

用对象引用做删除判断本身存在隐患，更推荐给每个商品添加唯一标识ID，通过ID匹配做删除：

1. 给商品列表添加唯一ID：

const [products] = useState([
    {
        id: 1,
        name: "iPhone",
        price: 80000
    },
    {
        id: 2,
        name: "Laptop",
        price: 55500
    },
    {
        id: 3,
        name: "iPad",
        price: 45000
    }
])

2. 修改删除逻辑，用ID匹配：

const removeCart = (p)=> {
    setCart(cart.filter(i => i.id !== p.id))
}

这种写法不需要依赖对象引用，无论添加时是否做对象拷贝，都不会出现误删的问题，稳定性更强。

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