react-leaflet地图多次重载后偶发加载不完整问题求助

问题现象 #

多次页面重载后，react-leaflet地图偶尔出现加载不完整的情况，执行强制全页重载（ctrl+shift+R）后恢复正常，涉及最新版Firefox、Edge浏览器。

核心原因 #

这种情况通常是Leaflet地图实例的残留状态、容器尺寸计算异常，或者Tile Layer的缓存冲突导致的——尤其是组件重复挂载时，地图没有正确完成初始化或清理操作。

修复方案及优化代码 #

以下是调整后的代码，针对问题点做了针对性优化：

import React, { useState, useEffect, useRef } from "react";
import { TileLayer, MapContainer, Marker, Popup } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import markerIconPng from "leaflet/dist/images/marker-icon.png";
import L, { Icon, Map } from 'leaflet';

interface SammelstellenProps {
  lat: number;
  lon: number;
}

const TestMap = () => {
  const sammelstellen: SammelstellenProps[] = [
    { lat: 51.5, lon: 9.9 }
  ];
  // 缓存Marker的Icon实例，避免每次渲染重复创建
  const markerIconRef = useRef<Icon | null>(null);
  // 保存Map实例，用于后续调用方法
  const mapRef = useRef<Map | null>(null);

  // 初始化Icon实例，只执行一次
  useEffect(() => {
    if (!markerIconRef.current) {
      markerIconRef.current = new Icon({
        iconUrl: markerIconPng,
        iconSize: [25, 41],
        iconAnchor: [12, 41]
      });
    }
  }, []);

  // 组件挂载后，强制地图重新计算容器尺寸，修复Tile加载异常
  useEffect(() => {
    if (mapRef.current) {
      mapRef.current.invalidateSize();
      // 可选：如果Tile加载仍有问题，强制刷新Tile Layer
      mapRef.current.eachLayer((layer) => {
        if (layer instanceof L.TileLayer) {
          layer.redraw();
        }
      });
    }
  }, []);

  // 组件卸载时销毁地图实例，清理残留状态
  useEffect(() => {
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
      }
    };
  }, []);

  return (
    <MapContainer
      ref={mapRef}
      center={[51.532807, 9.935401]}
      zoom={13}
      scrollWheelZoom={true}
      style={{ width: "100%", height: "400px", marginBottom: "2em" }}
    >
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright" target="_blank">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      {sammelstellen.map((s, index) => (
        <Marker
          key={index}
          position={[s.lat, s.lon]}
          icon={markerIconRef.current!}
        >
          <Popup>
            <p>some text ... </p>
          </Popup>
        </Marker>
      ))}
    </MapContainer>
  );
};

export default TestMap;

关键优化点说明 #

• 缓存Marker Icon实例：用useRef保存Icon对象，避免每次组件渲染都创建新的Icon，减少不必要的资源消耗和渲染触发。
• 强制地图尺寸计算：组件挂载后调用invalidateSize()，确保Leaflet正确识别容器的实际尺寸，避免因尺寸计算滞后导致的Tile加载不全。
• 清理地图实例：组件卸载时调用remove()销毁地图，避免残留的地图实例影响下次重载时的初始化。
• 添加Marker的key属性：遍历生成Marker时添加唯一key，符合React列表渲染规范，避免不必要的组件重渲染。

额外排查建议 #

• 检查浏览器缓存设置，确保Leaflet的CSS和图片资源没有被异常缓存；
• 如果使用了路由切换，确保地图组件在切换时正确卸载/挂载，避免多个地图实例共存；
• 尝试更换Tile Layer的URL（比如使用OpenStreetMap的其他镜像源），排查是否是Tile源的缓存问题。

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