无法使用 React useState 更新状态

Question

我正在学习反应hooks。在我的代码中，我将绘制地图的初始值设置为

//map state
const [mapData, setMapData] = useState(
    { lat: 40.712776, lng: -74.0059, zoom: 5 }
);

在useEffect()回电中，我正在加载地图一次

useEffect(() => {
    initMap();
}, []); // run once

在initMap()内部map.on()有获取更新地理位置的方法。initMap()是

const initMap = () => {
    mapboxgl.accessToken = 'token';
    const map = new mapboxgl.Map({
        container: mapContainer,
        style: 'mapbox://styles/mapbox/streets-v11',
        center: [mapData.lng, mapData.lat],
        zoom: mapData.zoom
    }); // load the map with init values
    // update the `mapData` as map move
    map.on('moveend', () => {
        const { lng, lat } = map.getCenter(); // logs the updated lat and lon
        setMapData({ lat: lat.toFixed(4), lng: lng.toFixed(4), zoom: map.getZoom().toFixed(2) }); // suppose to set the updated value
        console.log(mapData); // not logging updated values!
    });
}

setMapData()未设置状态。但是调用map.on并记录值。

Answer 1

useSelector 也是如此。我不相信 React Hooks 以这种方式得到 Mapbox 的支持。我有添加到地图上的事件处理程序，这些处理程序无法访问组件的 useState/useSelector 的当前值。这些值始终是将事件处理程序添加到映射时的值。我已经求助于添加另一个触发 useEffects 的状态，而不是在我的事件处理程序中处理它。

编辑：我注意到，即使在 Mapbox 事件处理程序中，您也可以使用 redux 的 'useStore' 钩子来获取当前的 redux 存储！但是，测试起来更难，因为您必须手动模拟"useStore"。希望对您有所帮助！

Answer 2

setState是

异步的，更新的状态可能可用于也可能不适用于它后面的语句。

使用在 mapData 更新上运行的效果挂钩来对更改做出反应。

useEffect(() => console.log(mapData), [mapData])