javascript - 增加数组中对象的数量Javascript，React，RecoilJs

Question

在控制台中检查时，结果很好，但如果在 setCart 中替换该数组，则不会发生，RecoilJS

const cartState=[
    { id:1, productName:'Apple',price:100,quantity:1}
    { id:2, productName:'Cherry',price:70,quantity:1}
    { id:3, productName:'Orange',price:60,quantity:1}
    { id:4, productName:'Grapes',price:69,quantity:1}
]

const [cart, setCart] = useRecoilState(cartState)

对象是 { id:4, ProductName:'Grapes',price:69,quantity:1}

const addToCart =(object) => {
        
            if(!cart.includes(object))
            {
                setCart([...cart, object])  
            }else 
            {
                let f= cart.map(items=>
                        {
                            if(items.id==object.id)
                            {
                                return {...items, quantity:items.quantity+ 1}
                            }
                            return items
                        })
                      
                        setCart(f)
                    
         }       
                    
}

Answer 1

问题

Array.prototype.includes 基本上使用浅引用相等。基元和字符串类型在值上始终等于自身，但对象必须引用完全相同的引用内存以便 .includes 为它们工作。在 React 中几乎不会出现这种情况，但添加到购物车的新商品通常是新 也是对象。

通过特定属性匹配对象总是更安全。

解决方案

按购物车商品 ID 进行搜索和匹配。如果购物车中的某些商品具有匹配的id属性，则更新购物车，否则将新商品添加到购物车数组中。

我建议还使用功能状态更新来正确更新之前的状态，而不是在任何范围内关闭任何购物车状态。这些有时可能是过时的引用，尤其是在任何循环中调用 addToCart 来添加多个项目时。

const addToCart = (newItem) => {
  if (cart.some(item => item.id === newItem.id)) {
    setCart(cart => cart.map(item => item.id === newItem.id
      ? { ...item, quantity: item.quantity + 1 }
      : item,
    ));
  } else {
    setCart(cart => [...cart, newItem]);
  }                 
}