Reactjs 在购物车中处理数量

在一个电子商务项目中，我制作了一个购物车，它的功能可以在这里看到

我的主要问题是，无论我在字段中输入多少，乘积只增加1

这是我对解释它的猜测

• 当前值：1/I类型4
• onChange使用数量4和以前的值1触发
• 调整购物车运行，并循环3次
• 第一次运行循环内addToCart时，它会更新购物车，因此数量字段中的值（更新为2）和名称也会更新（使用类似{ID}\u 2的值），因为再次触发更改后的字段
• 这次更改的当前值为2，以前的值为2
• 所以乘积_to_add=0，什么也不会发生

找不到一个可用性好的解决方案（我可以设置一个更新购物车按钮，但我无法处理一次更改，因为我不知道我有多少个字段，我可以使用+-解决方案，但最好在fileld中设置任意数字并自动更新购物车）

---

如果您有任何类型的建议…

我认为您看到问题的原因是，如果您调用

setCart

，

cart

的值在下次渲染之前不会实际更新。因此，当您第二次调用

setCart（[…cart]）

时，您正在扩展

cart的原始版本

您可以通过使用函数更新程序来解决此问题，在函数更新程序中，您传递一个函数，该函数接收最新版本的
cart
，作为其第一个参数：

setCart((latestCart) => ([...latestCart, ...newCart]);

我认为你应该考虑重构你的<代码> CART<代码>状态，以更好地反映你如何使用数据，例如，如果你使用：
const [cart, setCart] = useState([
    { id: 1, name: "product 1", qty: 1 },
    { id: 2, name: "product 2", qti: 1 },
]);

// you can update the quantity using one call to setCart:
setCart(cart.map(item => {
    if (item.id === itemIWantToUpdate) {
         return { ...item, qty: newQuantity };
    }
    return item;
}));

非常感谢。我想我将遵循第二条路径，一开始我认为将购物车存储为expandend items（我有一个购物车徽章，它简单地指示购物车的.length）会很有用，以获取购物车中您可以使用的物品总数
cart.reduce（（total，item）=>total+item.qty，0）
谢谢您已经在那里了，它几乎与这个转换一起工作，需要修复减少（但看起来很容易），但仍然有一件事我不喜欢，我不能退格或删除字段，不是什么大问题，但是我不喜欢这样，如果你不能解决这个问题，用你的新代码发布另一个问题，问题是什么，有人可以帮助：）我猜输入事件和更改处理程序不会因为某种原因导致字段的值更改，字段的
值
属性设置是否正确？