如何修复React中Jsvectormap地图重复渲染多次的问题？

问题分析 #

出现重复地图的核心原因有两个：

1. React开发环境的Strict Mode会自动执行两次useEffect（用于检测潜在的副作用问题），每次执行都会创建一个新的jsVectorMap实例，旧实例未被清理，导致多个地图叠加。
2. 使用id="map"作为选择器，当组件重复执行渲染逻辑时，同一个DOM元素会被多次绑定地图实例。

修复方案 #

1. 使用React Ref替代ID选择器 #

用useRef获取地图容器的DOM元素，避免全局ID选择器带来的冲突问题。

2. 添加副作用清理逻辑 #

在useEffect的返回函数中销毁已创建的地图实例，确保组件卸载或重新渲染时清理旧实例。

3. 防止重复初始化 #

在创建新地图前，先检查并销毁已存在的实例。

修改后的代码 #

Map.jsx #

import React, { useEffect, useRef } from "react";
import "./Map.css";
import jsVectorMap from "jsvectormap";
import "jsvectormap/dist/maps/world-merc.js";

function Map() {
  const mapRef = useRef(null);
  const mapInstanceRef = useRef(null);

  useEffect(() => {
    // 清理已存在的地图实例
    if (mapInstanceRef.current) {
      mapInstanceRef.current.destroy();
    }

    // 创建新的地图实例
    if (mapRef.current) {
      mapInstanceRef.current = new jsVectorMap({
        selector: mapRef.current,
        map: "world_merc"
      });
    }

    // 组件卸载时清理地图
    return () => {
      if (mapInstanceRef.current) {
        mapInstanceRef.current.destroy();
      }
    };
  }, []);

  return <div ref={mapRef} />;
}

export default Map;

额外说明 #

• 开发环境下Strict Mode的双重执行是正常现象，上述修复逻辑会在第二次执行时先销毁第一次创建的实例，最终只会保留一个地图。
• 如果生产环境仍出现重复，检查是否存在组件被多次调用的情况，或是否有其他逻辑触发了Map组件的重复渲染。

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