通过 Spotify API 呈现所有播放列表名称

Question

我正在尝试渲染我创建的多个播放列表，但是一次只能显示一个播放列表。 我想知道如何更改我的代码以呈现所有播放列表而不是一个播放列表。

  getMyPlaylists(){
    spotifyApi.getUserPlaylists()
      .then((response) => {
         this.setState({
           myPlaylists: {
              playlists: response.items[0].name, //displays first playlist only
           
        }
      });
    })
  }

render() {

    return (
        <div>
        My Playlists:  { this.state.myPlaylists.playlists } 
        </div>
);
  }
}

export default App;

Answer 1

你应该用这个改变你的 getMyPlaylists function：

  getMyPlaylists(){
    spotifyApi.getUserPlaylists()
      .then((response) => {
         this.setState({
           myPlaylists: {
              playlists: response.items
           
        }
      });
    })
  }

你应该像这样循环渲染中的项目：

{this.state.myPlaylists.playlists.map((playlist) => {
  return (
     <div>
        {playlist.name}
      </div>
   )
 })}