更新状态项的数量（React 和 useReducer）答案

【问题标题】：Updating state item's quantity (React and useReducer)更新状态项的数量（React 和 useReducer）
【发布时间】：2021-05-05 19:53:16
【问题描述】：

我正在尝试构建一个购物车，以便在调用调度时将项目添加到 useReducer 状态，然后通过提供程序相应地在应用程序的其他地方呈现。

我的问题是虽然我可以将项目添加到状态的数组中，但我不希望它在有人购买两个（或更多）相同的项目时将全新的第二个项目添加到数组中。

相反，它应该增加现有状态项的数量属性。

我制作了一个 Codesandbox 来说明这一点。当单击“添加”时，显然是在向数组中添加了“测试项”的副本，但在第一个实例之后，它应该增加现有项的“数量”属性，因此数组中的项数保持在 1。

我尝试了 .find、.filter、.map 的组合，但似乎无法到达那里，而且对所有这些都是新手，这变得非常令人沮丧。

https://codesandbox.io/s/festive-ramanujan-pjyw7?file=/src/App.js

任何帮助表示赞赏.. 谢谢！

【问题讨论】：

标签： reactjs state

【解决方案1】：

您可以使用 findIndex 查看该项目是否已添加，是否增加了该项目的数量以及是否未将数量设置为 1。

类似的东西。

   case "ADD_ITEM":
        let quantity = 0;
        const checkIndex = state.items
                          .findIndex(item => item.id === action.payload.id);
        
        if (checkIndex === -1) {
          quantity = 1;
          return {
            ...state,
            items: [...state.items, 
              { ...action.payload, quantity: quantity }]
          };
        }
      quantity = state.items[checkIndex].quantity += 1;
        
      return {
        ...state,
        ...action.payload, quantity: quantity
      };

【讨论】：

谢谢。我试过了，但正如你所看到的，它现在在第一个实例之后将项目的总数量增加了 2。因此，在第一次“添加”时，它将正确地将新项目添加到数组（购物车）中。但是，当您添加另一个时，该项目的总数量会增加 2 到 3，而不是 1 到 2。
我确实注意到发生了类似的奇怪事情，但没有机会调试 - 如果找到修复程序，我会进一步调查并更新答案。
对于它的价值，这是我让它工作的唯一方法。看起来改变原始状态是一个很大的禁忌。codesandbox.io/s/festive-ramanujan-pjyw7?file=/src/App.js
是的，这是一个很大的禁忌。