ReactJS Mapbox-gl 无效类型 : 'container' must be a String or HTMLElement

Question

我正在使用 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;

我上面的代码基本上是在网页上显示 map 。但是我收到了错误消息:

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

如果我将 const map = new mapboxgl.Map() 放入 useEffect() 中，一切都会好起来的，但这意味着每次我 setState map 将再次调用并重新加载。

我希望在我的应用程序的整个运行期间使用相同的 map 。

我该怎么做？

Answer 1

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

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} />;
}