Question

我目前正在努力更改我的Web应用程序中当前存在的几种状态。状态如下：

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，然后更改直接链接到该对象的值。我该如何实现？

我找到了一种编辑对象的规则单一数组的方法，如下所示：

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;
});

更新对象的useState数组中的对象值

1 个答案: