1

在控制台中检查结果很好，但是如果在 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)
                    
         }       
                    
}
4

1 回答 1

1

问题

Array.prototype.includes基本上使用浅引用相等。Primitives 和 String 类型的值总是等于它们自己，但对象必须引用内存中完全相同的引用才能为.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]);
  }                 
}
于 2021-08-05T20:39:22.037 回答