无法使用 react useState 更新状态

Question

我正在学习 react 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

setState是异步的，更新后的状态可能会或可能不会用于跟随它的语句。

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

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

Answer 2

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

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