增加数组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：‘葡萄’，价格:69，数量: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才能为它们工作。但是，当向购物车中添加的新项通常也将是一个新对象时，这种情况几乎没有发生过。

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

解决方案

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

我建议也使用函数状态更新来正确地从以前的状态更新，而不是在任何作用域中关闭任何cart状态。这些有时是过时的引用，特别是如果在任何循环中调用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]);
  }                 
}