增加数组中对象的数量 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，产品名称：'Grapes'，价格：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 基本上使用浅引用相等。基元和字符串类型 always 等于它们自身的值，但对象 must 引用内存中完全相同的引用，以便 .includes 为它们工作。尽管当 new 添加到购物车的商品通常是 [ 时，在 React 中几乎不会出现这种情况。 =32=]new对象也是。

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

解决方案

按购物车商品 ID 进行搜索和匹配。如果 some 商品在购物车中有匹配的 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]);
  }                 
}

增加数组中对象的数量 Javascript ,React, RecoilJs

Increase the quantity of an object in an array Javascript ,React, RecoilJs

javascript

reactjs

recoiljs

问题

解决方案