невозможно обновить состояние с помощью реакции useState - PullRequest
Новая
       3

невозможно обновить состояние с помощью реакции useState

0 голосов
/ 01 июня 2019

Я учусь реагировать 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 вызывается и записывает значения.

1 Ответ

1 голос
/ 01 июня 2019

setState является асинхронным, обновленное состояние может или не может быть доступно операторам, следующим за ним.

Используйте ловушку эффекта, которая запускается при обновлении mapData, чтобы реагировать на изменения. 

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