Question

我正在尝试用axios实现async / await promise。第一个请求正在完成，然后使用响应填充属性。但是，我无法将第二个请求作为属性分配给第一个请求生成的数组的每个项目：

async componentDidMount(){
 await navigator.geolocation.getCurrentPosition(position=>{
    this.setState({geoLat:position.coords.latitude,geoLng:position.coords.longitude});
    axios.get(`https://maps.googleapis.com/maps/api/place/nearbysearch/json?location=${position.coords.latitude},${position.coords.longitude}&radius=5000&keyword=recensioni&type=restaurant&types=restaurant&key=AIzaSyCZ7rgMN34kWkGvr8Pzkf_8nkT7W6gowBA`)
         .then(response =>this.setState({restaurantsFetchedFromGoogle:response.data.results}));
    });

    this.setState({restaurantsFetchedFromGoogle:this.state.restaurantsFetchedFromGoogle.map(item=>{
      axios.get(`https://maps.googleapis.com/maps/api/place/details/json?placeid=${item.place_id}&key=AIzaSyCZ7rgMN34kWkGvr8Pzkf_8nkT7W6gowBA`).then(response=>
      ...item,
      reviews:response.data.reviews
      )
    })
  }

item已经有来自第一个axios调用的一些属性，我正在尝试使用...item传播它们，只是添加reviews:response.data.reviews作为键值在项目对象中配对。第二次返回axios响应我做错了什么？

Answer 1

setState是异步的，据说，如果我理解正确的话，你就是在另一个setState之后。可能发生的事情是，当第一个setState被填充时，第二个也会发生，你丢失了第一个setState中的内容。

只有在第一个完成后才能运行第二个setState：

axios.get(stuff).then(stuff => {
  this.setState({
    ...this.state,
    geoLat: stuff
  }, () => {
    // run after stuff is in state
    axios.get(stuff).then(response => {
      this.setState({
        restaurantsFetchedFromGoogle: response
      }, () => {
        // continue with the next axios request and setState
      })
    })
  })
})

这个axios异步/等待React请求有什么问题？

1 个答案: