javascript - 无法在 map 循环中访问 Axios 调用的值

Question

我有一个 javascript 对象，其 ID 对应于一组画廊。我使用 map 循环遍历它。在每个循环中，我都会进行 axios 调用来获取当前 id 的图库。

最后，我需要一个包含所有画廊内容的数组。

问题是 map 循环完成后我无法访问数据。我在 console.log(gallery) 时看到所有数据，但在 console.log(gallery[0].gallery) 时看不到。

我怀疑这必须与异步调用有关。我是新手，所以我可能会错过一些简单的东西。

额外信息:这是一个 React Native 项目，带有 redux thunk。

请帮忙，谢谢。

export function FetchGalleries( galleries_ids ) {

    return function (dispatch) {

        let galleries = [];
        galleries_ids.map( (record, index) =>
        {

            axios.get('https://e.dgyd.com.ar/wp-json/wp/v2/media?_embed&parent='+record.id)
              .then(response => {
                galleries.push( response );
              });

        });

        console.log(galleries); // I can see all data
        console.log( JSON.parse(JSON.stringify( galleries[0].gallery ))); // returns undefined
        dispatch({ type: FETCH_GALLERIES_SUCCESS, payload: galleries })

      }
}

Answer 1

最简单的解决方案是等待所有 promise 得到解决，然后处理结果

export function FetchGalleries( galleries_ids ) {

    return function (dispatch) {
        return Promise.all(galleries_ids.map( (record, index) => {
            return axios.get('https://e.dgyd.com.ar/wp-json/wp/v2/media?_embed&parent='+record.id);
        })).then(galleries => {
            dispatch({ type: FETCH_GALLERIES_SUCCESS, payload: galleries });
        });
    }
}