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

Question

我使用 react-mapbox-gl 包装器有以下简单的 React 组件。到目前为止，它很棒，但是当我尝试使用 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 状态时， map 框背景都会变黑，并且整个 map 都会重新加载。不确定是编码/结构错误还是 Mapbox 的错误。我也尝试将其重组为更小的组件，但没有区别。

有任何想法吗？

Answer 1

这是预期的行为，因为随着每次状态更改，ReactMapboxGl被重新创建。一种解决方案(防止 map API 重新加载和 map 重新渲染)是创建 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;