更新对象的 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;
});