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

Question

我有一个反应组件 Map，我尝试在其中使用Jsvectormap库来显示地图。问题是地图出现了好几次。我很难理解为什么地图会出现 3 次，因为我只调用了 Map 组件一次。有什么想法可以解决这个问题，以便只显示 1 张地图吗？

这是该Map.jsx组件：

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

function Map() {
  useEffect(() => {
    const map = new jsVectorMap({
      selector: "#map",
      map: "world_merc"
    });
  }, []);

  return <div id="map" />;
}

export default Map;

该Map.css文件当前为空，文件App.js如下所示：

import React from 'react'
import Map from './components/Map/Map'

function App() {
  return (
    <div className="App">
      <Map />
    </div>
  );
}

export default App;

注意屏幕上出现的 3 张地图：

Answer 1

在开发过程中，StrictMode从版本 18 开始，React 在初始渲染上安装、卸载然后安装组件，以检查错误和“不正确的 React 代码”。

在Map组件中useEffect，您需要一个清理函数，在组件卸载之前销毁映射并将其从 DOM 中删除。

否则，如果组件被设计为多次安装，则每次安装都会注册一个新的映射。

下面是您如何解决问题的示例。还要注意评论：

function Map() {
  // Used a ref instead of using the id as you did:
  const mapRef = useRef();

  useEffect(() => {
    const mapElement = mapRef.current;
    const map = new jsVectorMap({
      selector: mapElement,
      map: "world_merc"
    });

    return () => {
      map.destroy();
      // destroy() doesn't seem to remove the map, that's why the DOM mutation:
      mapElement.innerHTML = "";
    };
  }, []);

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