如何正确地在react组件中进行嵌套的fetch()调用?

时间:2017-11-06 03:44:17

标签: reactjs http github-api

所以我有一个react组件,它在github上显示用户已加星标的存储库以及这些存储库的未解决问题。为了获得星号回购的问题,我创建了一个url列表,然后通过将fetch映射到url列表,在promise列表上调用Promise.all。包含已加星标的回购的状态在初始渲染时设置,但问题的状态不是。知道我的代码有什么问题吗?

componentDidMount() {
// headers contain auth token for github api
let headers = new Headers() 
var myInit = {
  method: 'GET',
  headers: headers,
  mode: 'cors',
  cache: 'default'
};

fetch("https://api.github.com/users/djm158/starred", myInit)
  .then(response => response.json())
  .then(
  stars => {
      this.setState({
      stars: stars
    })

    let urls = []
    for (let i = 0; i < stars.length; i++) {
      urls.push(stars[i].url + '/issues')
    }

    return Promise.all(urls.map(url => fetch(url, myInit)))
  })
  .then(results => Promise.all(results.map(d => d.json())))
  .then(data => {
    this.setState({
      issues: data
    })
  })

}

1 个答案:

答案 0 :(得分:0)

想通了,这里有一个关于我试图做的工作实例的链接https://github.com/djm158/github-starred-issues