MapBox页面初始加载时聚合簇与标记随机加载异常排查

加载状态不稳定的核心原因是在组件同步渲染阶段直接读取Map.current上的bounds值：

• 地图实例初始化是异步过程，首次组件渲染时地图大概率还没完成挂载，此时Map.current为null，传给useSupercluster的bounds是null，无法计算出有效聚合数据
• ref值变化不会触发组件重渲染，就算后续地图初始化完成，没有其他状态更新触发重渲染的话，bounds会一直停留在null值，导致页面空白
• 手动拖动地图、触发热更新时会带动组件重渲染，此时地图已经初始化完成，能拿到有效bounds，所以元素会正常显示，这就是加载效果随机、偶现不渲染的直接原因。

通过useEffect监听地图实例的生命周期和视图变化事件，把bounds、zoom值存为响应式状态，不要在渲染阶段直接读取ref值，具体实现如下：

• 新增状态存储地图当前的bounds和zoom值，替代原来直接读ref的逻辑
• 在useEffect中绑定地图的load/move/zoom事件，地图就绪、视图变化时同步更新状态，触发useSupercluster重新计算聚合数据
• 组件卸载时移除事件监听，避免内存泄漏

完整修复代码：

import { useState, useEffect, useMemo } from 'react';
// 其余原有导入保持不变

// 组件内部逻辑
const points = useMemo(
  () =>
    data.map((store) => ({
      type: "Feature",
      properties: {
        cluster: false,
        storeId: store.id,
        category: store.country_code,
      },
      geometry: {
        type: "Point",
        coordinates: [store.coords[0], store.coords[1]],
      },
    })),
  [data]
);

// 用响应式状态存储地图视图参数，配置初始兜底值
const [mapViewState, setMapViewState] = useState({
  bounds: null,
  zoom: viewport.zoom
});

// 监听地图实例，绑定事件同步视图状态
useEffect(() => {
  const mapInstance = Map.current?.getMap();
  if (!mapInstance) return;

  const syncViewState = () => {
    setMapViewState({
      bounds: mapInstance.getBounds().toArray().flat(),
      zoom: mapInstance.getZoom()
    });
  };

  // 地图首次加载完成后同步一次状态，触发首屏聚合计算
  mapInstance.on('load', syncViewState);
  // 拖动、缩放地图时同步状态
  mapInstance.on('move', syncViewState);
  mapInstance.on('zoom', syncViewState);

  // 卸载时清理事件监听
  return () => {
    mapInstance.off('load', syncViewState);
    mapInstance.off('move', syncViewState);
    mapInstance.off('zoom', syncViewState);
  };
}, [Map.current]);

// 从状态取参数传给聚合hook
const { clusters } = useSupercluster({
  points,
  bounds: mapViewState.bounds,
  zoom: mapViewState.zoom,
  options: { radius: 75, maxZoom: 20 },
});

补充优化：如果需要首屏默认展示所有点位，可以在points数据加载完成、地图load事件触发时，调用mapInstance.fitBounds()传入所有点位的边界范围，手动设置地图初始视图，避免首屏bounds范围和点位不匹配导致的元素被过滤问题。

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