加载react-leaflet地图时报Cannot read properties of null ('offsetWidth')错误如何解决

核心原因 #

你出现这个报错的本质是地图实例销毁逻辑错误，旧地图实例绑定的事件残留，但对应的DOM已经被手动清空，具体问题点如下：

• 你把map、drawnItems声明为组件顶层普通变量，每次组件重渲染都会重建，旧地图实例没有被正确销毁，残留的事件回调在触发时找不到对应的DOM元素，所以抛出offsetWidth读null的错误。
• 每次fences、markers更新时你都直接重写地图容器的innerHTML，完全破坏了Leaflet已经绑定的DOM结构和事件监听。
• 没有复用地图实例，每次数据更新都全量重建地图，不仅性能差还容易导致内存泄漏和事件冲突。

修复方案 #

你完全不需要每次数据更新都重建整个地图，只需要首次挂载时初始化地图，后续数据更新时替换图层内容即可，改造后代码如下：

import { useRef, useEffect } from 'react';
import L from 'leaflet';

const MyComponent = ({ fences, markers }) => {    
  // 用useRef存储实例，避免重渲染丢失
  const mapRef = useRef(null);
  const drawnItemsRef = useRef(new L.FeatureGroup());
  const mapContainerRef = useRef(null);

  // 仅首次挂载时初始化地图
  useEffect(() => {
    // 已经初始化过就跳过
    if (mapRef.current || !mapContainerRef.current) return;

    // 初始化地图，用ref绑定DOM，不用固定id避免多实例冲突
    mapRef.current = L.map(mapContainerRef.current, {
      drawControl: false
    }).setView([7.8731, 80.7718], 8);

    L.tileLayer(
      'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 18,
      }
    ).addTo(mapRef.current);

    mapRef.current.addLayer(drawnItemsRef.current);

    // 组件卸载时销毁地图，清理事件
    return () => {
      if (mapRef.current) {
        mapRef.current.remove();
        mapRef.current = null;
      }
    };
  }, []);

  // 仅fences、markers更新时更新图层，不重建地图
  useEffect(() => {
    if (!drawnItemsRef.current) return;
    // 清空旧的标记和围栏
    drawnItemsRef.current.clearLayers();

    // 这里添加新的fences和markers到drawnItemsRef.current即可
    // ...你的原有添加图层逻辑
  }, [fences, markers]);

  // 用ref绑定容器，不用固定id，记得给容器设置宽高否则地图不会渲染
  return <div ref={mapContainerRef} style={{ width: '100%', height: '400px' }} />;
}

额外注意事项 #

• 如果确实有需要全量重置地图的场景，一定要先调用map.remove()销毁旧实例，再创建新实例，不要直接修改地图容器的innerHTML。
• 不要给多个地图组件用同一个固定id，用ref绑定DOM可以避免同页面多实例冲突。

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