react-google-maps-api热力图组件切换移除失效问题求助

你遇到的核心问题是：HeatmapLayerF组件没有在props.data变化时自动更新底层的热力图实例数据，或者组件的浅比较逻辑没检测到数据变化。以下是两种可行的解决方案：

方案一：添加key属性强制组件重新渲染 #

通过给HeatmapLayerF添加唯一的key，当heatMapTracks变化时，React会卸载旧组件并挂载新组件，从而重新初始化热力图并加载新数据。同时修复null值的判断逻辑：

import { HeatmapLayerF } from '@react-google-maps/api';

interface IHeatMap {
  heatMapTracks: { location: google.maps.LatLng; weight: number }[] | null;
}

export const HeatMap = (props: IHeatMap) => {
  const { heatMapTracks } = props;

  // 处理null或空数组的情况
  if (!heatMapTracks || heatMapTracks.length === 0) {
    return null;
  }

  return (
    <HeatmapLayerF
      // 用数据的字符串化结果作为key，确保数据变化时key更新
      key={JSON.stringify(heatMapTracks)}
      data={heatMapTracks}
      options={{
        radius: 15,
        opacity: 1,
      }}
    />
  );
};

方案二：手动调用HeatmapLayer实例的setData方法 #

通过useHeatmapLayer获取热力图实例的引用，在useEffect中监听heatMapTracks的变化，手动调用setData更新数据，这种方式不需要重新挂载组件，性能更优：

import { HeatmapLayerF, useHeatmapLayer } from '@react-google-maps/api';
import { useEffect } from 'react';

interface IHeatMap {
  heatMapTracks: { location: google.maps.LatLng; weight: number }[] | null;
}

export const HeatMap = (props: IHeatMap) => {
  const { heatMapTracks } = props;
  // 获取热力图实例的ref
  const heatmapRef = useHeatmapLayer();

  useEffect(() => {
    if (!heatmapRef.current || !heatMapTracks) {
      return;
    }
    // 手动更新热力图数据
    heatmapRef.current.setData(heatMapTracks);
  }, [heatMapTracks, heatmapRef]);

  if (!heatMapTracks || heatMapTracks.length === 0) {
    return null;
  }

  return (
    <HeatmapLayerF
      ref={heatmapRef}
      data={heatMapTracks}
      options={{
        radius: 15,
        opacity: 1,
      }}
    />
  );
};

额外注意事项 #

• 确保父组件中heatMapTracks的状态更新是正确的：使用React的useState或useReducer管理数据，避免直接修改数组引用（比如用concat、map等返回新数组的方法，而不是push、splice等原地修改）。
• 原条件渲染中，如果heatMapTracks可能为null，一定要先判断null再访问length，否则会抛出类型错误。

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