如何从 Axios 的响应中提升 React 中的状态？

Question

我有一个带有state 的父App.js 组件和一个带有state 的子MapContainer.js。子组件显示谷歌地图，我正在使用以下函数将状态从子组件提升到父组件：

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()。但是我不能在我的 axios 请求中使用response.data.results，因为该值仅在 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);
  });
};