React中react-leaflet MarkerCluster动态更新标记重复、计数错误如何解决

该问题不属于预期行为，问题根源是自定义MarkerCluster组件没有处理子元素卸载后的图层实例清理逻辑：react-leaflet的<Marker>组件挂载时会自动添加到父级layerContainer（也就是你创建的L.MarkerClusterGroup实例）中，但<Marker>卸载时默认不会主动从集群组中移除对应的Leaflet Marker实例，导致实例残留在集群组中，删除标记时只是React层面的组件卸载，Leaflet实例还留存在集群组里，再次添加同标记时就会出现重复、聚合计数只增不减的问题。

你可以在updateMarkerCluster方法中补充以下逻辑解决问题，分两种实现方案：

方案1：全量清理（适合数据量<1000的场景，实现最简单） #

直接清空集群组所有残留图层，新的子元素会在React重渲染时自动挂载到集群组中，不会出现整组重渲的闪烁问题：

import React from "react";
import { PropsWithChildren } from "react";

import "leaflet.markercluster";
import L, { MarkerClusterGroupOptions } from "leaflet";
import { LeafletContextInterface, createPathComponent } from "@react-leaflet/core";

type MarkerClusterProps = PropsWithChildren<MarkerClusterGroupOptions>;

const createMarkerCluster = ({ children, ...props }: MarkerClusterProps, context: LeafletContextInterface) => {
  const instance = new L.MarkerClusterGroup(props);
  return { instance, context: { ...context, layerContainer: instance } }
}

const updateMarkerCluster = (instance: L.MarkerClusterGroup, props: MarkerClusterProps, prevProps: MarkerClusterProps) => {
  // 子元素变更时清理所有残留图层
  if (prevProps.children !== props.children) {
    instance.clearLayers();
  }
  // 处理集群组配置项更新
  Object.entries(props).forEach(([key, value]) => {
    if (key !== "children" && prevProps[key as keyof MarkerClusterProps] !== value) {
      // @ts-ignore 动态更新集群组配置
      instance.options[key] = value;
      // 配置生效的特殊处理，比如半径变更需要重新计算聚类
      if (key === "maxClusterRadius") {
        instance.refreshClusters();
      }
    }
  })
}

const MarkerCluster = createPathComponent(createMarkerCluster, updateMarkerCluster);

export default MarkerCluster;

方案2：差分更新（适合数据量>1000的场景，性能更优） #

需要先给每个<Marker>绑定稳定唯一的业务ID，不要用数组索引当key/ID，仅增删发生变化的图层：

1. 生成locationMarkers时给每个Marker加唯一标识：

const locationMarkers = markerList.map(item => (
  <Marker
    key={item.id} // 必须用稳定唯一的业务ID，不能用数组索引
    position={[item.lat, item.lng]}
    // 把唯一ID存在Marker的options里方便后续识别
    markerId={item.id}
  >
    {/* 你的Popup等子内容 */}
  </Marker>
))

2. 修改updateMarkerCluster逻辑，仅删除不再存在的旧图层：

const updateMarkerCluster = (instance: L.MarkerClusterGroup, props: MarkerClusterProps, prevProps: MarkerClusterProps) => {
  if (prevProps.children !== props.children) {
    // 收集现有图层的ID映射
    const existingLayerMap = new Map<string, L.Marker>();
    instance.getLayers().forEach(layer => {
      // @ts-ignore 读取Marker上绑定的唯一ID
      const markerId = layer.options.markerId;
      if (markerId) existingLayerMap.set(markerId, layer as L.Marker);
    })

    // 收集新子元素的ID集合
    const newMarkerIdSet = new Set<string>();
    React.Children.forEach(props.children, child => {
      if (React.isValidElement(child) && child.props.markerId) {
        newMarkerIdSet.add(child.props.markerId);
      }
    })

    // 仅删除不再出现在新子元素中的旧图层
    existingLayerMap.forEach((layer, id) => {
      if (!newMarkerIdSet.has(id)) {
        instance.removeLayer(layer);
      }
    })
  }
  // 配置项更新逻辑和方案1一致
  Object.entries(props).forEach(([key, value]) => {
    if (key !== "children" && prevProps[key as keyof MarkerClusterProps] !== value) {
      // @ts-ignore 动态更新集群组配置
      instance.options[key] = value;
      if (key === "maxClusterRadius") {
        instance.refreshClusters();
      }
    }
  })
}

注意事项 #

• 所有<Marker>必须绑定稳定唯一的key，不能用数组索引当key，否则会出现渲染错位问题
• 不要在每次渲染时重新生成全部locationMarkers元素，仅更新发生变化的标记对应的JSX元素即可
• 如果聚类配置修改后没有生效，可以手动调用instance.refreshClusters()触发重新计算

内容的提问来源于stack exchange，提问作者Andyally