在reactjs中循环获取

Question

所以基本上我创建了一个循环，该循环从数组中获取值，然后使用youtube
api将这些值放入一个循环中。如果我从循环内访问youtube链接，则工作正常，但在循环外“（当我运行console.log（{urllist}）”时，我得到一个空数组。我要做的就是推送所有值放入urllist空数组，然后将其传输到状态变量（“
videos”）

我要指的功能是videoUrls

class MusicCharter extends React.Component{

    constructor(){

    super();

    this.state= {

      data:[],

      videos:[],

        }

    }



    componentDidMount(){

  XHR.onreadystatechange = function(){

    if(XHR.readyState === 4 && XHR.status === 200) {

        var url = XHR.responseText;

        this.setState({data:(JSON.parse(url).tracks.track)})

    }

  }.bind(this)



  XHR.open("GET","http://ws.audioscrobbler.com/2.0/?method=chart.gettoptracks&api_key=xxxxxxx&format=json");

  XHR.send();

}



videoUrls=()=>{

  let i=0;

  let urllist=[]

  for(i;i< this.state.data.length;i++){

      fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)

      .then(response=> {

        return response.json()

    })

     .then(data=>{

        return(urllist.push(data.items[0]))})

   }

   console.log({urllist})

 }

Answer 1

您的循环不会迭代异步，但你可以把你的for循环内部解决这个async功能异步过程for循环一个JavaScript内和awaiting 异步操作的结果

videoUrls = async () => {
  let i=0;
  let urllist=[]
  for(i;i< this.state.data.length;i++){
      const response = await fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      const json = await response.json()
      urllist.push(json.items[0])
      console.log({urllist})
    }
 }

这可以防止for循环递增，直到对json的响应的获取和转换都完成为止