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

Question

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

    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背景会变黑并且整个地图都会重新加载。不确定是编程/结构错误还是Mapbox的错误。我也尝试将其重新组织成较小的组件，但没有任何区别。

有什么想法吗？

- Ronald Langeveld

Answer 1

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

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

- Vadim Gremyachev