Javascript 如何将数量增加一个，并跟踪单击的项目？

我正在尝试创建一个计数器，用于跟踪用户每次单击的大小，到目前为止，我只跟踪有效单击的第一个项目，但在单击另一个大小后，它会跟踪以前单击的大小

如何独立于单击的下一个尺寸为每个项目创建计数器

这是指向我的代码沙盒的链接，函数位于 “产品页面”：

这是我的状态：

this.state = { sizeQuantity: 0,   chosenSize: [], afterState: '', newState: [], list: [] };

这是我的职责：

 updateArray = (products, product, delta) => {
    this.seenItems.push({
      ...product,
      newStock: product.stock,
      product: this.state.sizeQuantity,
      delta
    });

    const tester = [];
    const result = [];
    this.seenItems.forEach(function(el) {
      if (tester.indexOf(el._id) === -1) {
        tester.push(el._id);
        result.push({ ...el });
      }
    });

    this.setState(prevState => ({
      chosenSize: result.map(item => ({
        ...item,
        newStock: (item.stock += delta),
        product: (prevState.sizeQuantity += 1)
      }))
    }));
  };

---

item.stock

也不会在每次单击时减少一个。

我认为您应该首先将状态重写为

useReducer

。如果你有颗粒化的元素，比如修改状态的动作，那就更简单了。你能给我一个简单的例子说明如何去做吗？