React实时骑手地图标记问题：避免数据覆盖与重复

问题根源 #

1. 现有代码每次收到位置消息时先清空状态再执行concat，导致永远只保留最新的一条骑手数据，旧数据被完全覆盖。
2. useEffect依赖motoboysCoords，会导致状态每次变化都重新创建WebSocket连接，不仅浪费资源，还可能引发重复监听的问题。
3. 用数组索引作为Marker的key，React无法正确追踪骑手元素的变化，可能导致渲染异常。

解决方案核心逻辑 #

根据骑手的唯一标识（比如骑手ID、手机号或名字，需确保全局唯一）判断：

• 若该骑手已在状态数组中，更新其位置坐标
• 若不存在，将新骑手的位置添加到数组中

修改后的代码 #

1. WebSocket监听与状态更新逻辑

const [motoboysCoords, setMotoboysCoords] = useState<CoordsProps[]>([]);

useEffect(() => {
  const socket = io(Environment.BASE_URL_SERVER);

  const handlePosition = (msg: LocationProps) => {
    const newRiderLoc = msg.localization;
    // 替换成你实际的骑手唯一标识字段，比如name/id
    const uniqueKey = 'id'; 

    setMotoboysCoords(prevCoords => {
      // 检查是否已有该骑手
      const riderIndex = prevCoords.findIndex(rider => rider[uniqueKey] === newRiderLoc[uniqueKey]);
      
      if (riderIndex !== -1) {
        // 更新现有骑手的位置
        const updatedCoords = [...prevCoords];
        updatedCoords[riderIndex] = newRiderLoc;
        return updatedCoords;
      } else {
        // 添加新骑手
        return [...prevCoords, newRiderLoc];
      }
    });
  };

  socket.on('receivedPosition', handlePosition);

  // 组件卸载时清理socket连接
  return () => {
    socket.off('receivedPosition', handlePosition);
    socket.disconnect();
  };
}, []); // 空依赖，只初始化一次socket连接

2. 地图标记渲染（优化key值）

{motoboysCoords.map((item) => (
  <Marker
    key={item.id} // 使用骑手唯一标识作为key，禁止用index
    position={{
      lat: Number(item.lat),
      lng: Number(item.long)
    }}
  />
))}

关键说明 #

• 函数式状态更新：setMotoboysCoords(prev => ...)确保每次更新都基于最新的状态快照，避免因异步更新导致的状态不一致。
• 唯一标识判断：通过findIndex快速定位骑手位置，比some后再map更高效，直接修改对应索引的元素。
• WebSocket连接优化：空依赖数组保证只创建一次连接，清理函数在组件卸载时关闭连接，防止内存泄漏。
• 合理设置key：用骑手唯一标识代替数组索引，让React精准识别元素变化，提升渲染性能并避免错误。

内容的提问来源于stack exchange，提问作者Marcelo Ribeiro da Silva