React Simple Maps分支切换时地图重叠问题求助

核心原因 #

切换分支时旧地图组件未被React正确销毁，导致SVG元素残留DOM中，与新地图重叠。这通常是因为React复用了相同key的组件实例，或是组件卸载时未清理地图DOM。

具体修复步骤 #

1. 给Maps组件添加唯一分支Key

在App组件渲染Maps时，将当前选中的分支（camera/senato）作为组件的key属性。React会根据key判断是否需要销毁旧组件并创建新实例，彻底避免复用旧地图DOM：

// App组件示例代码
import Maps from './Maps';
import { useState } from 'react';

function App() {
  const [currentBranch, setCurrentBranch] = useState('camera'); // 或你的默认分支

  return (
    <div>
      {/* 切换分支的按钮 */}
      <button onClick={() => setCurrentBranch('camera')}>Camera</button>
      <button onClick={() => setCurrentBranch('senato')}>Senato</button>
      {/* 关键：添加与分支绑定的key */}
      <Maps branch={currentBranch} key={currentBranch} />
    </div>
  );
}

2. 组件卸载时强制清理地图容器

在Maps组件中添加清理逻辑，确保卸载时清空容器内的所有SVG元素，防止残留：

// Maps组件示例代码
import { useEffect, useRef } from 'react';
import { ComposableMap, Geographies, Geography } from 'react-simple-maps';
// 导入对应分支的地理数据
import cameraGeo from './geo/camera.json';
import senatoGeo from './geo/senato.json';

const Maps = ({ branch }) => {
  const mapContainer = useRef(null);
  const geoData = branch === 'camera' ? cameraGeo : senatoGeo;

  // 组件卸载时清空容器
  useEffect(() => {
    return () => {
      if (mapContainer.current) {
        mapContainer.current.innerHTML = '';
      }
    };
  }, [branch]);

  return (
    <div ref={mapContainer} style={{ width: '100%', height: '600px' }}>
      <ComposableMap>
        <Geographies geography={geoData}>
          {({ geographies }) =>
            geographies.map((geo) => (
              <Geography key={geo.rsmKey} geography={geo} />
            ))
          }
        </Geographies>
      </ComposableMap>
    </div>
  );
};

export default Maps;

3. 检查分支切换逻辑

确保App组件中currentBranch状态更新是同步的，没有异步延迟或状态残留。避免使用非受控组件管理分支切换状态。

验证修复 #

切换分支后，打开浏览器开发者工具的Elements面板，检查地图容器内是否只有当前分支对应的SVG元素，旧分支的SVG应已被完全移除。

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