ReactJS Mapbox-gl 无效类型：“容器”必须是字符串或 HTMLElement

我正在使用 ReactJS 和 Mapbox GL JS 构建一个小型应用程序。

const MapRender = () => {
  const mapContainerRef = useRef(null);
  const map = new mapboxgl.Map({
    container: mapContainerRef.current,
    style: "mapbox://styles/mapbox/streets-v11",
    center: [0, 0],
    zoom: 1
  });
  map();

  useEffect(()=>{
  ..........//Code 
  },[]);

  return (
    <div>
      <div className="map-container" ref={mapContainerRef} />
    </div>
  );
};

export default MapRender;

我上面的代码基本上在网页上显示地图。但我收到错误消息：

Invalid type: 'container' must be a String or HTMLElement.

如果我放的话一切都会好起来的const map = new mapboxgl.Map() into useEffect()但每次当我setState地图将再次调用并重新加载。

我希望在我的应用程序的整个运行时使用相同的地图。

我怎样才能做到这一点 ？

如果您不希望每次有新数据传递给地图时都重新初始化地图。您可以执行以下操作，当 ref 连接到容器 div 时创建地图，如果已经创建了地图，则不会创建地图。

export default function MapRender() {
  const ref = useRef(null);
  const [map, setMap] = useState(null);
  useEffect(() => {
    if (ref.current && !map) {
      const map = new mapboxgl.Map({
        container: ref.current,
        style: "mapbox://styles/mapbox/streets-v11",
        center: [0, 0],
        zoom: 1
      });
      setMap(map);
    }
  }, [ref, map]);
  return <div className="map-container" ref={ref} />;
}