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 循环不会异步迭代，但您可以通过将 for 循环放在一个async函数Asynchronous Process 内的 javascript for 循环和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 响应的获取和转换完成

Answer 2

您可以使用 Promise.all

videoUrls = () =>{
  const promises = this.state.data.map(item => {
    return fetch(`https://www.googleapis.com/youtube/v3/search?part=snippet&q=${this.state.data[i].name}&key=xxxxxxxxxxx0`)
      .then(response=> {
      return response.json()
    });
  });

  Promise.all(promises).then(results => {
    const videos = results.map(result => result.items[0]);
    console.log(videos);
    this.setState({videos});
  })
}