コードの次の行に進む前に.map（）の実行が完了するまで待つ方法

Question

状態を更新する前にすべての投稿が投稿配列にプッシュされるのを待つ方法はありますか？

私は、HackerNewsのトップ記事を取得するために投稿IDの配列を繰り返し処理しなければなりませんでした。これらのIDをすべて単一の投稿リンクに変換し、1つの投稿リンクのデータを配列に格納して、その配列をDOMにレンダリングします。

import React, {Component} from 'react'; 
 
import axios from 'axios'; 
 
import Post from './Post'; 
 

 
class ContentWrapper extends Component { 
 
    constructor(props){ 
 
    super(props); 
 
    this.state = { 
 
     posts: [] 
 
    } 
 
    } 
 

 
    componentDidMount(){ 
 
    const topStories = 'https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty'; 
 
    // `https://hacker-news.firebaseio.com/v0/item/.json?print=pretty` 
 
    axios(topStories).then(res => { 
 
     const posts = []; 
 
     res.data.map(val => { 
 
     const url = `https://hacker-news.firebaseio.com/v0/item/${val}.json?print=pretty`; 
 
     return axios.get(url).then(res => { 
 
      posts.push(res.data); 
 
     }).then(res => this.setState({posts: res})); 
 
     }); 
 
    }); 
 
    } 
 

 
    render() { 
 
    const posts = this.state.posts.map((val, i) => { 
 
     return <Post key={i} title={val.title} author={val.by} /> 
 
    }); 
 
    return (
 
     <div className="content-wrapper"> 
 
     <h2>{this.props.currentSource}</h2> 
 
     {posts} 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
export default ContentWrapper;

Answer 1

あなたはPromise.all使用する必要があります - ここhttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

const topStories = 
    "https://hacker-news.firebaseio.com/v0/topstories.json?print=pretty"; 

axios(topStories).then(res => { 
    const posts = []; 

    const requests = res.data.map(val => { 
    const url = `https://hacker-news.firebaseio.com/v0/item/${val}.json?print=pretty`; 
    return axios.get(url).then(res => { 
     posts.push(res.data); 
    }); 
    }); 

    // Wait for all requests, and then setState 
    Promise.all(requests).then(() => { 
    this.setState({ 
     posts 
    }); 
    }); 
}); 

---

テストを：私はaxiosを使用しませんが、あなたは試してみてくださいhttps://runkit.com/embed/8pac53dhmy2y