Arrays 此axios异步/等待React请求有什么问题?

Arrays 此axios异步/等待React请求有什么问题?,arrays,reactjs,promise,axios,Arrays,Reactjs,Promise,Axios,我正在尝试用axios实现异步/等待承诺。第一个请求正在完成,然后用响应填充属性。但是,我无法将第二个请求的响应作为属性分配给第一个请求生成的数组的每个项: async componentDidMount(){ await navigator.geolocation.getCurrentPosition(position=>{ this.setState({geoLat:position.coords.latitude,geoLng:position.coords.longitu

我正在尝试用axios实现异步/等待承诺。第一个请求正在完成,然后用响应填充属性。但是,我无法将第二个请求的响应作为属性分配给第一个请求生成的数组的每个项:

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
作为item对象中的键值对。axios响应的第二次返回有什么不对?

设置状态是异步的,如果我理解正确,您正在一个接一个地设置状态。可能发生的情况是,当填充第一个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
      })
    })
  })
})

await
如果您没有使用承诺,但仍然首先传递callbackfirst
async/await
仅适用于承诺,则该功能不起作用。你不能像这样使用它,wait navigator.geolocation.getCurrentPosition(callback)还有这个部分
axios.get(
{item.place\u id}&key=AIzaSyCZ7rgMN34kWkGvr8Pzkf\u 8nkT7W6gowBA
)。然后(response=>…item,reviews:response.data.reviews)
是无效的。所以如果我们删除async/wait,第二个axios请求的响应主体是什么?我将如何添加属性评论及其来自url的响应?