React-Mapbox-GL 在状态更新时不断刷新

Question

我有以下使用 react-mapbox-gl 包装器的简单 React 组件。到目前为止，它很棒，但是我在尝试使用 useState 钩子更新状态时发现了一个小烦恼。

    function Location(props) {
       const [selectedMarker, setSelectedMarker] = useState(null);
       const [markerBlock, setMarkerBlock] = useState(false)
      const {payload} = useContext(MarkerContext);
      const [latlong, setLatlong] = useState(null);


      console.log(payload);

        const Map = ReactMapboxGl({
            accessToken:
              'tokenHiddenforstackoverflow',

          });

          const getLatlng = (map, event) => {

              setLatlong(event.lngLat);
          }


        return (
            <>
    <Map
      style="mapbox://styles/mapbox/satellite-streets-v9"
      containerStyle={{
        height: '100vh',
        width: '100%'
      }}
      onClick={getLatlng}
      center={[18.432723671572944, -33.926210020024826]}
    >
    <ZoomControl />

    </Map>

            </>

        );
    }

    export default Location;

每当我更新 LatLong 状态时，地图框背景都会变黑并且整个地图都会重新加载。不确定是编码/结构错误还是来自 Mapbox 的错误。我也尝试将其重组为更小的组件，但没有区别。

有任何想法吗？

Answer 1

这是预期的行为，因为每次状态更改ReactMapboxGl都会重新创建。一种解决方案（防止地图 API 重新加载和地图重新渲染）是创建函数外部的单个实例：ReactMapboxGl Location

//create a single instance of WebGl Mapbox map   
const Map = ReactMapboxGl({
  accessToken:
    "--your token goes here--"
});


function Location(props) {
  const [position, setPosition] = useState(null);

  const handleClick = (map, event) => {
    setPosition([event.lngLat.lat, event.lngLat.lng]);
  };

  return (
    <Map
      style="mapbox://styles/mapbox/satellite-streets-v9"
      containerStyle={{
        height: "100vh",
        width: "100%"
      }}
      onClick={handleClick}
      center={[18.432723671572944, -33.926210020024826]}
    ></Map>
  );
}

export default Location;