Reactjs - 如何循环使用 axios 链接的 API？

Question

我正在尝试使用黑客新闻 API 构建一些东西，但我遇到了问题。将项目显示到屏幕上。我需要的项目首先需要调用另一个端点。我调用了这个端点并遍历它，以便我可以将数据从那个端点传递到我需要工作的项目端点，但我只显示一个项目。我怎样才能进一步做到这一点以一次获得大约 30 件物品？

state={
    hackernews: []
  }
  componentDidMount(){
    Axios.get('/newstories.json')
    .then(res => {
      for(let i = 0; i<res.data.length; i++){
        const newsID = res.data[i];
        return Axios.get(`/item/${newsID}.json`)
      }
    })
    .then(res=>{
      const news = res.data
      this.setState({hackernews: [...this.state.hackernews, news]})
      
    })
  }

hackernews api链接https://github.com/HackerNews/API

Answer 1

您可以使用async/await 获取ID，然后正常使用.then：

 async componentDidMount(){
   let res=await Axios.get('/newstories.json')

     for(let i = 0; i<res.data.length; i++){
        const newsID = res.data[i];
       Axios.get(`/item/${newsID}.json`)  
       .then(res1=>{
          const news = res1.data
          this.setState({hackernews: [...this.state.hackernews, news]})
      
         })
     }

}