Question

我有一个状态为restaurantsFetchedFromGoogle的数组，目前存储了之前从谷歌地图中提取的20个地方。它们存储在数组中：

0:"ChIJTb1qU315MhMRiL7pihnMWfg"
1:"ChIJGZ0jXCCNMRMRrH8VHRAgEYE"
2:"ChIJQ5jaX8eMMRMRnRoZxl6X95w"
...
19:"ChIJQ5jaX8errrMRnRoZxl6X95w"

现在我正在尝试使用Axios get请求迭代数组，例如：

componentDidMount(){
    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=50000&keyword=recensioni&type=ristorante&keyword=cena&key=MYAPIKEY`)
         .then(response => this.setState({restaurantsFetchedFromGoogle:response.data.results}));
    });
    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 => this.setState({placeId:response.data}))
           .catch(err =>{
           console.log(err);
           console.log(err.response.data.error);
    });
  });
    axios.get('/restaurants.json')
         .then(response =>this.setState({restaurants:response.data}));
  }

第一个和第三个axios请求通过但不是第二个。我做错了什么？

Answer 1

添加错误处理程序以记录错误消息！这应该告诉你为什么请求失败。

this.state.restaurantsFetchedFromGoogle.map(item=>{
axios.get('https://maps.googleapis.com/maps/api/place/details/json?placeid='+ 
item + '&key=MYAPIKEY')
   .then(response => this.setState({placeId:response.data}))
   .catch(err => {
     console.log(err)                     //Axios entire error message
     console.log(err.response.data.error) //Google API error message 
   })
});

即使没有.catch，您也可以使用chrome dev工具在开发工具的“网络”标签下查看错误。

如果您之后仍有问题 - 发布特定的错误消息，我会看看。

如何在Google地图和React中使用axios获取placeid的数据？

1 个答案: