[英]React-Mapbox-GL keeps refreshing on state update
我有以下使用 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 的错误。 我也尝试将其重组为更小的组件,但没有区别。
有任何想法吗?
这是预期的行为,因为每次状态更改时,都会重新创建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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.