javascript - 如何仅在对象内的所有 id 完成 fetch 后设置 sate

Question

我试图在获取操作循环完成后设置状态(显示加载器直到数据获取完成)。我使用 async 函数通过 data.map 来执行此操作，但它仍在运行，并且我的 setState 发生在它之前。知道如何解决这个问题，我是否在这里遗漏了一些东西。

这是我的代码:

class App extends Component {
      constructor() {
        super();
        this.state = { 

          posts: [],
          loading: true
        }
      }

      async componentDidMount() {
        await this.fetchNews();    
        this.setState({loading: false})

      }

      async fetchNews() {        
        await fetch('https://hacker-news.firebaseio.com/v0/newstories.json')
          .then(response => response.json())
          .then((data) => {
            data.slice(0,10).map((newsId) => {
               fetch('https://hacker-news.firebaseio.com/v0/item/' + newsId + '.json')
                .then(response => response.json())
                .then((itemDetail) => {
                  this.setState({ posts: [...this.state.posts, itemDetail] })
                  console.log('Fetching in progress');                  
                })
                return true;
            })
            console.log('done finished');
          })           
        }    
      render() {    
        var post = this.state.posts;
        const loading = this.state.loading;
        console.log(post)
        const listItems = post.map((link) =>
        <li key={link.id}>{link.title}</li> );

      return <div>
                  {loading ? <Loader type="MutatingDots" color="#somecolor" height={80} width={80} /> : <div>{listItems}</div>}        
        </div>;
     }    
}

export default App;

这是我的控制台日志，您可以看到当提取仍在运行时，在开始时打印完成的消息。

Answer 1

要在 map 内进行异步操作，请使用Promise.all，它将正常工作

const fetchNews = async () =>
  await fetch('https://hacker-news.firebaseio.com/v0/newstories.json')
    .then((response: any) => response.json())
    .then(async (data: any) => {
      let news = data.slice(0, 10);
      await Promise.all(
        news.map(async (newsId: any) => {
          await fetch('https://hacker-news.firebaseio.com/v0/item/' + newsId + '.json')
            .then((response: any) => response.json())
            .then((itemDetail: any) => {
               this.setState({ posts: [...this.state.posts, itemDetail] });
              console.log('Fetching in progress', newsId);
            });
          return true;
        })
      );
      console.log('done finished');
    });