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

setState是异步的，其后的语句可能无法使用更新状态。

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

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

Answer 2

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

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

无法使用react useState更新状态

2 个答案: