Question

我刚刚开始使用React和ES6，如果这有点简单的话就道歉。

我目前正在玩FoursquareAPI。我使用ES6 fetch来返回一系列对象（它们实际上是世界不同地区的不同场所），然后映射并返回并存储在应用程序的状态中。这很好，并返回我想要的东西：

// method to call api
getVenues: (searchTerm) => {
    const fetchVenuesURL = `${urlExplore}${searchTerm}&limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180602`;

return fetch(fetchVenuesURL).then( response => {
         return response.json();
    }).then( jsonResponse => {
        if (jsonResponse.response.groups[0].items) {
            return jsonResponse.response.groups[0].items.map(item => (

                // populate venues
                {
                    id: item.venue.id,
                    name: item.venue.name,
                    address : item.venue.location.address,
                    city : item.venue.location.city,
                    country : item.venue.location.country,
                    icon : item.venue.categories[0].icon
                }

            ));                

        } else {
            return [];
        }

    });

// method in App.js to setState

search(term){
    Foursquare.getVenues(term).then(foursquareResponse => { 
       this.setState({venues: foursquareResponse});
    }); 
}

当我需要获取与每个场地相关的照片时，问题就出现了。由原始fetch返回。这些来自不同的端点。我不确定最好的方法是什么。

一种方法是拥有两个独立的api调用方法，然后以某种方式填充第一个空白的照片字段和第二个背面的照片在App.js中，但这看起来很笨拙。

我的直觉是以某种方式嵌套Api电话，但我不确定如何解决这个问题。我希望按照某种方式对第一个映射对象的每次迭代应用一个方法做一些事情，但是不知道如何将它们链接在一起，以便第二个进入照片属性第一：

{
    id: item.venue.id,
    name: item.venue.name,
    address : item.venue.location.address,
    city : item.venue.location.city,
    country : item.venue.location.country,
    icon : item.venue.categories[0].icon
    photos : []
 }

 const fetchPhotosURL = `${urlPhotos}${venueId}/photos?limit=10&client_id=${clientId}&client_secret=${clientSecret}&v=20180602`;

return fetch(fetchPhotosURL).then( response => {
     return response.json();
}).then( jsonResponse => {

    if (jsonResponse.response.photos.items) {
        console.log(jsonResponse.response.photos.items[0].venue)
        return jsonResponse.response.photos.items.map(item => (
        {
            id : item.id,
            created: item.createdAt,
            prefix: item.prefix,
            suffix: item.suffix,
            width: item.width,
            height: item.height,
            venue: item.venue
        }
        ));
    } else {
        return [];
    }
})

任何人都可以指出我正确的方向。我曾经猜测，只要你做过一次这样的事情并不困难，但我发现它很难。

提前致谢。

嵌套API调用并映射到相同的返回对象ES6 / ReactJs

0 个答案: