Значение из useState всегда является начальным значением в обратном вызове события карты - PullRequest
Новая
       153

Значение из useState всегда является начальным значением в обратном вызове события карты

0 голосов
/ 07 августа 2020

Я использую @esri/react-arcgis для отображения основной c карты. Цель состоит в том, чтобы отправить запрос при щелчке, чтобы найти некоторые данные для области, по которой щелкнули.

Это моя карта: 

<Map
    onLoad={handleMapLoad}
    onFail={handleMapLoadFail}
    onClick={handleMapClick}
    ... // bunch of other properties (basemap, styles etc)
></Map>

Моя проблема в том, что когда onClick срабатывает (и handleMapClick вызывается), значения из useState компонента всегда являются начальным значением. Он определяется так: const [mapViewReference, setMapViewReference] = useState(null);.

Он не всегда должен иметь значение null, потому что:

  1. handleMapLoad вызывается в начале. Он устанавливает следующее состояние: setMapViewReference(view);, тогда как view - свойство, которое я получаю напрямую из библиотеки esri.
  2. После этого я нажимаю на карту, и выполняется обратный вызов
  3. Если Я вызываю handleMapClick с фиктивной кнопки, состояние / значение будет правильным.

Это что-то, что может быть обработано useCallback или другим хуком? Я не уверен, что это проблема с библиотекой esri ...

Это прямо перед моим return (функциональный компонент): 

const handleMapClick = async event => {
    console.log(mapViewReference); // This is always null, unless I call the function manually from a dummy button
    const point = mapViewReference.toMap(event);
    const response = await featureLayerReference.queryFeatures({...});
};

1 Ответ

1 голос
/ 07 августа 2020

да, раньше у меня была такая же проблема с react-map-gl. Я считаю, что он запоминает функцию onClick при монтировании компонента и не обновляет ее, когда карта отображается при любом изменении состояния. то, что я сделал, - это запустить setState при нажатии на карту события tigger и выполнить все мои действия в useEffect при изменении состояния события: 

const [event,setEvent]= useState()

useEffect(()=>{
if(event){
   console.log(mapViewReference); // This is always null, unless I call the function 
     manually from a dummy button
    const point = mapViewReference.toMap(event);
    const response = await featureLayerReference.queryFeatures({...});
}
},[event])

и для компонента Map: 

<Map
    onLoad={handleMapLoad}
    onFail={handleMapLoadFail}
    onClick={setEvent}
    ... // bunch of other properties (basemap, styles etc)
></Map>
...