使用 React JS 从 Spotify API 调用多个播放列表

Posted 2023-04-15

【中文标题】使用 React JS 从 Spotify API 调用多个播放列表

【英文标题】：Calling multiple playlist from Spotify API using React JS

【发布时间】：2020-10-24 16:49:50

【问题描述】：

我正在尝试使用接收播放列表 ID 的 spotifywebapi.getPlaylist() 函数从 Spotify 显示 12 个播放列表。我可以单独调用它们，但是当我 componentDidMount 它们时，只有最后一个会呈现并显示在页面上。

我尝试将播放列表 ID 放入对象数组中并像这样调用它 spotifyWebApi.getPlaylist($id) 但我收到“没有播放列表 ID 输入”的错误

有谁知道如何使用 spotify 一次显示/调用多个播放列表以在页面上呈现？

这里正在调用一个播放列表：

ariesPlaylist = () => 
      spotifyWebApi.getPlaylist('37i9dQZF1DX2DC3Q7JOmYe')
        .then((data) => 
          console.log('updating')
          console.log(data)
          this.setState(
            playlistData: 
              name: data.name,
              url: data.external_urls.spotify,
              image: data.images[0].url
            
      )
    )

这是componentDidMount

componentDidMount() 
      this.ariesPlaylist();
      this.taurusPlaylist();
      this.geminiPlaylist();
      this.cancerPlaylist();

【问题讨论】：

欢迎来到 SO！请分享您迄今为止尝试过的代码 sn-p

【参考方案1】：

我认为 Promise.all() 在这种情况下可能会对您有所帮助。

https://developer.mozilla.org/en-US/docs/Web/javascript/Reference/Global_Objects/Promise/all