React集成Leaflet side-by-side重渲染地图报Map container已初始化错误

• Leaflet初始化地图时，会为绑定的DOM容器关联唯一的地图实例，同一个DOM节点不支持重复调用L.map()方法完成初始化
• 当前代码的useEffect依赖baseViewCoords，只要接口请求完成更新了该状态，副作用就会重复执行，再次尝试初始化#map容器，触发「Map container is already initialized」的校验报错

核心是拆分仅需执行一次的初始化逻辑和随坐标更新的视图调整逻辑：

• 用useRef存储全局地图实例，避免重复创建
• 地图初始化、图层加载、分屏控件绑定的逻辑，放在空依赖数组的useEffect中，仅在组件首次挂载时执行一次
• 坐标更新逻辑单独放在依赖baseViewCoords的副作用中，直接操作已存储的地图实例调整视图，不需要重新初始化地图

import { useState, useEffect, useRef } from 'react';
import L from 'leaflet';
import 'leaflet-side-by-side'; // 确保引入分屏控件依赖

const MapComponent = () => {
  const [baseViewCoords, setBaseViewCoords] = useState([37.715, 44.8611]);
  // 存储地图实例的ref
  const mapRef = useRef(null);

  // 仅在组件首次挂载时执行，初始化地图
  useEffect(() => {
    // 初始化地图实例并存入ref
    const map = L.map('map').setView(baseViewCoords, 13);
    mapRef.current = map;

    const osmLayer = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(map);

    const stamenLayer = L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/watercolor/{z}/{x}/{y}.png', {
      attribution: 'Map tiles by Stamen Design, CC BY 3.0 — Map data OpenStreetMap',
      minZoom: 1,
      maxZoom: 16
    }).addTo(map);

    // 分屏控件仅需初始化一次
    L.control.sideBySide(stamenLayer, osmLayer).addTo(map);

    // 组件卸载时销毁地图，避免内存泄漏
    return () => {
      map.remove();
      mapRef.current = null;
    };
  }, []); // 空依赖：仅首次执行

  // 坐标更新时仅调整视图，不重新初始化地图
  useEffect(() => {
    // 确保地图实例已初始化后再执行调整
    if (mapRef.current) {
      mapRef.current.setView(baseViewCoords, 13);
    }
  }, [baseViewCoords]);

  const searchApiHandler = () => {
    // 接口请求逻辑：获取新坐标后调用 setBaseViewCoords 更新状态
  };

  return <div id="map" style={{ height: '100vh' }} />;
};

export default MapComponent;

• 不要把图层、分屏控件这类仅需绑定一次的逻辑，放在依赖坐标更新的副作用里，否则除了初始化报错，还会出现图层重复叠加、分屏控件重复渲染的问题
• 必须给地图容器设置明确的高宽，否则会出现地图显示不全的问题

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