Question

我有App.js的父state组件和MapContainer.js的孩子state。子组件显示谷歌地图，我正在使用以下功能将状态从子级提升到父级：

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的{{1}}和来自lat:y的{{1}}的{{1}}和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);
  });
};

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

1 个答案: