Как поднять состояние в React из ответа с Axios?

Question

У меня есть родительский App.js компонент с state и дочерний MapContainer.js также с state.Дочерний компонент отображает карту Google, и я использую следующую функцию для поднятия состояния от дочернего к родительскому:

mapClicked = (event) => {
     const { markers } = this.state;
     let url = 'https://maps.googleapis.com/maps/api/geocode/json?latlng='+ event.latLng.lat() + ',' + event.latLng.lng()+ '&key='+ 'MYGOOGLEAPIKEY' +'';
     axios.get(url).then(response => this.setState({
       googleReverseGeolocation:response.data.results,
       markers:[{  position:{lat:event.latLng.lat(),lng:event.latLng.lng()}  }, ...markers],
       latClick:event.latLng.lat(),
       lngClick:event.latLng.lng()
     }))   
     this.props.onResultChange(event.latLng.lat(),event.latLng.lng(), **NEED A VALID 3RD ARGUMENT**)    
   }

, и соответствующая функция для родительского компонента выглядит следующим образом:

 onResultChange(x,y,info){
    this.setState(
      {
        lat:x,
        lng:y,
        clickedInfoObject:info
      }
    )
  }

lat:x и lat:y из onResultChange() корректно обновляются из дочернего компонента из значений, переданных функции, т.е. event.latLng.lat() и event.latLng.lng().Однако я не могу использовать response.data.results из моего запроса axios, потому что это значение действительно только в рамках запроса axios.Как я могу вставить третий аргумент для функции onResultChange(event.latLng.lat(),event.latLng.lng(), **NEED A VALID 3RD ARGUMENT**), чтобы поднять состояние со всеми 3 аргументами?

Answer 1

Если нормально позвонить onResultChange при возврате запроса, это должно работать:

mapClicked = event => {
  const lat = event.latLng.lat();
  const lng = event.latLng.lng();
  let url = `https://maps.googleapis.com/maps/api/geocode/json?latlng=${lat},${lng}&key=MYGOOGLEAPIKEY`;
  axios.get(url).then(response => {
    const { markers } = this.state;
    this.setState({
      googleReverseGeolocation: response.data.results,
      markers: [{ position: { lat, lng } }, ...markers],
      latClick: lat,
      lngClick: lng
    });
    this.props.onResultChange(lat, lng, response);
  });
};