更新useState中数组内的对象

Question

我有一个cart状态，其中初始值是一个空数组[]。

const[cart，setCart]=使用状态([](；

这就是我的一个产品object的样子，

{id: 1, name: 'Shoe pair', price: 40}

每个产品都有一个add to cart按钮。因此，当点击add to cart按钮时，addToCart功能被触发，

const addToCart = (item) => {
let initialItem = {id: item.id, name: item.name, quantity: 1} 
let existingItem = cart.filter(cartItem => item.id === cartItem.id);
if(existingItem.length > 0){
existingItem.quantity = existingItem.quantity + 1;
} else {
setCart(crr => [...crr, initialItem ]);
}
}

addToCart的作用是什么正如你所看到的，这很简单。首先，它通过将初始数量设置为1来创建对象。如果购物车中已经存在相同的产品，它会将购物车产品中的数量更新为1，否则将initialItem添加到购物车中。

为了监控这种情况，我使用了useEffect挂钩，

useEffect(() => {
console.log(cart);
}, [cart]);

我的问题是，当数量更新为1时，我在控制台日志中看不到购物车，但当initialItem被推到购物车时，它会显示出来。

Answer 1

第一个问题：它是find，而不是filter。

下一个问题——修改数组内部的项不会告诉React数组已经更改，您还需要在现有项更新后重新设置状态。

const addToCart = (item) => {
const initialItem = { id: item.id, name: item.name, quantity: 1 };
const existingItem = cart.find((cartItem) => item.id === cartItem.id);
if (existingItem) {
existingItem.quantity += 1;
setCart((curr) => [...curr]);
} else {
setCart((curr) => [...curr, initialItem]);
}
};

Answer 2

您的useEffect没有在您认为应该运行的时候运行，是因为它的依赖项在您认为更新的时候没有更新。它将在调用setCart并更新对cart的引用时运行，然后您将看到控制台日志。

filter返回一个新的数组——不会改变原来的数组。文档->https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

find通过引用返回项(如果找到(，否则返回undeifined。文档->https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find

替代示例：

const addToCart = (item) => {
const existingItem = cart.find(i => i.id === item.id)
const updatedCart = existingItem
? cart.map(i => {
return i.id === item.id ? {...i, quantity: i.quantity + 1} : i
})
: [...cart, item]
}
setCart(updatedCart)
}