我从套接字监听数据。当我收到数据时，我像这样更新数组。但是状态没有更新。请帮助我并提前致谢

Question

socket?.on('addLocation', data => {
  console.log('addLocation', data);
  let isFound = false;
  let newMarkers = markers.map(marker => {
    if (marker.fleet_id == data.fleetId) {
      isFound = false;
      return {
        ...marker,
        latitude: data.lat,
        longitude: data.long,
      };
    } else {
      return marker;
    }
  });

  if (!isFound) {
    newMarkers = [
      ...newMarkers,
      {
        fleet_id: data.fleetId,
        latitude: data.lat,
        longitude: data.long,
      },
    ];
  }
  setMarker(newMarkers);
})

Answer 1

假设 markers 的状态是 setMarker 正在更新，那么这似乎是 markers 状态上的陈旧封装问题。回调正在更新关闭状态，而不是当前的标记状态值。

使用功能状态更新来正确访问以前的状态而不是过时的值。 Array.prototype.map 旨在将一组值映射到另一组值，并且不应该产生像设置 isFound 标志这样的副作用。首先搜索数据以确定是否需要更新状态或是否需要附加新元素。

例子：

socket?.on('addLocation', data => {
  console.log('addLocation', data);
  setMarker(markers => {
    const isFound = markers.some(marker => marker.fleet_id == data.fleetId);

    if (isFound) {
      return markers.map(marker => marker.fleet_id == data.fleetId
        ? {
          ...marker,
          latitude: data.lat,
          longitude: data.long,
        }
        : marker
      );
    }

    return [
      ...markers,
      {
        fleet_id: data.fleetId,
        latitude: data.lat,
        longitude: data.long,
      },
    ];
  });
});

Answer 2

socket?.on('addLocation', ({ fleetId, lat, long }) => {
  setMarkers(existing => {
    const latLng = { latitude: lat, longitude: long };
    const index = existing.findIndex(m => m.fleet_id === fleetId);
    if (index === -1) {
      return [...existing, {
        fleet_id: fleetId,
        ...latLng
      }]
    } else {
      const clone = [...existing];
      clone[index] = {
        ...clone[index],
        ...latLng
      }
      return clone;
    }
  });
});

这里有一些事情：

1. 您应该使用 setMarkers 的回调风格来确保您在修改时拥有“最新”副本。
2. 写的代码相当复杂，你可以简化很多。 isFound 永远是 false 也是一个逻辑问题。