al verificarlo en la consola, el resultado está bien, pero si reemplaza esa matriz en setCart, no está sucediendo, 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)el objeto es {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) } } Array.prototype.includes básicamente utiliza una igualdad de referencia superficial. Los tipos primitivos y de cadena siempre son iguales a sí mismos por valor, pero los objetos deben hacer referencia a la misma referencia exacta en la memoria para que .includes funcione para ellos. Sin embargo, este casi nunca es el caso en React cuando el nuevo elemento que se agrega al carrito también suele ser un nuevo objeto.
Siempre es más seguro emparejar objetos por propiedades específicas.
Busque y combine por los identificadores de artículos del carrito. Si algún artículo en el carrito tiene una propiedad de id coincidente, actualice el carrito; de lo contrario, agregue el nuevo artículo a la matriz del carrito.
Sugiero usar también actualizaciones de estado funcional para actualizar correctamente desde el estado anterior, no cualquier estado de carrito cerrado en ningún ámbito. A veces, estas pueden ser referencias obsoletas, especialmente si se llama a addToCart en cualquier bucle para agregar varios elementos.
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]); } }