使用 setState 跨對象數組更新 object

Question

我的問題與此有關，但這里的問題是我必須中繼 object 屬性，我只想更新一個 object。如果我使用map ，它會更新我的對象數組中的所有對象。 它的結構是：

[
    {
      id: 1,
      itemNames: ['aaa','xxx'],
      removed: [],
      ...
    },
    {
      id: 1,
      itemNames: ['yyy', 'xxx'],
      removed: [],
      ...
    },
    ...
]

我的邏輯是：我在 itemNames 中查找項目名稱，如果它存在於 state 中 - 從第一次出現的 object 中刪除它，並將其添加到此 object 的已刪除屬性中。我設法用 map 完成了它，但隨后它對每 object 進行了一次已給出項目名稱。

function filterByItemName(itemName) {
  this.setState(prevState => ({
    ...prevState,
    arr: prevState.arr.map(item) => {
      if (item.itemNames.includes(itemName)) {
        return {
          ...item,
          removed: [...item.removed, itemName],
          itemNames: removeFirstFoundElement(item.itemNames, itemName),
        };
      }
      return item;
    }),
  }));
}

以下代碼的工作方式是找到具有給定 itemName 的所有對象 - 但我只想更改第一種情況......調用filterByItemName('xxx')后我希望它是：

[
    {
      id: 1,
      itemNames: ['aaa'],
      removed: ['xxx],
      ...
    },
    {
      id: 1,
      itemNames: ['yyy', 'xxx'],
      removed: [],
      ...
    },
    ...
]

而現在它是這樣的：

[
    {
      id: 1,
      itemNames: ['aaa'],
      removed: ['xxx],
      ...
    },
    {
      id: 1,
      itemNames: ['yyy'],
      removed: ['xxx'],
      ...
    },
    ...
]

Answer 1

我想你可以設置一個shouldInsert標志來檢查你是否已經插入過一次。 這是我的方法。 如果您可以在此處共享一些codesandbox鏈接，那就更容易了。

function filterByItemName(itemName) {
  let shouldInsert = true;
  this.setState(prevState => ({
    ...prevState,
    arr: prevState.arr.map(item) => {
      const found = item.itemNames.includes(itemName);
      if (found && shouldInsert) {
        shouldInsert = false;
        return {
          ...item,
          removed: [...item.removed, itemName],
          itemNames: removeFirstFoundElement(item.itemNames, itemName),
        };
      }
      return item;
    }),
  }));
}