更新對象的 useState 數組中的 object 值

Question

我目前正在努力改變我目前在我的 web 應用程序中擁有的幾個狀態。 state如下：

const [points, setPoint] = useState([]);

它存儲這樣的數據：

0: (2) [{…}, {…}]
1: (2) [{…}, {…}]

換句話說，該數組中的每一個都包含一個由兩個對象組成的數組。 內容是這樣的；

0:
elementId: 0
elementPosX: 615
elementPosY: 171
1:
elementId: "liiMJzWgphZPbnx"
elementPosX: 618.5
elementPosY: 317

我想搜索x是否等於elementId ，然后更改直接鏈接到此 object 的值。 我怎樣才能做到這一點？

我找到了一種在常規單個對象數組中編輯 object 的方法，如下所示：

setPoint(singlePoint.map(x => {
  if (x.id !== id) return x
  return { ...x, position: { x: xPosition - 365, y: yPosition - 80 } }
}))

這行得通，但我不確定是否有更簡單的方法可以做到這一點？

Answer 1

如果您關心數組順序。 您必須首先找到元素索引，然后對其進行更新：

setPoint((allPoints) => {
  const index = allPoint.findIndex((element) => element.id === x.id);
  allPoints[index] = {
    ...x,
    position: { x: xPosition - 365, y: yPosition - 80 },
  };
  return allPoints;
});