我在 React 中遇到的错误：如果你打算渲染一个子集合，请改用数组

Question

所以我想做的是从用户那里获取所有播放列表，正如我在 console.log 时看到的那样。但是对于 getAll 中的播放列表变量，我收到关于使用数组呈现子集合的错误，因为那是我试图存储它的地方。我对反应还很陌生，javascript 所以我确定这是一个愚蠢的错误。

 class App extends Component {
  constructor(){
    super();
    var list = new Array();
    const params = this.getHashParams(); //tokens saved here
    const token = params.access_token;
    if (token) {
      spotifyApi.setAccessToken(token);
    }
    this.state = {
      loggedIn: token ? true : false,
      nowPlaying: { name: ' Not Checked', albumArt: '', albumName: ' Nobody'},
      getAll: {playlists: []}
    };
    this.getNowPlaying = this.getNowPlaying.bind(this);
    this.getPlaylists = this.getPlaylists.bind(this);
  }

  getHashParams() { //uses authenticated users refresh and access token
    var hashParams = {};
    var e, r = /([^&;=]+)=?([^&;]*)/g,
        q = window.location.hash.substring(1);
    e = r.exec(q)
    while (e) {
       hashParams[e[1]] = decodeURIComponent(e[2]);
       e = r.exec(q);
    }
    return hashParams;
  }

  getNowPlaying(){
        spotifyApi.getMyCurrentPlaybackState()
          .then((response) => {
            this.setState({
              nowPlaying: { 
                  name: response.item.name, 
                  albumArt: response.item.album.images[0].url,
                  albumName: response.item.album.name
                }
            });
          }) 
    }


  getPlaylists(){
    spotifyApi.getUserPlaylists()
      .then((response) => {
        console.log(response.items)
        this.setState({
          getAll: { 
            playlists: response.items
           }
        });
      })  
  }

  render() {
    return (
      <div className="App">
            <a href='http://localhost:8888' > 
                <button> Logout </button> 
            </a>
            <div>
                Now Playing: 
                { this.state.nowPlaying.name }
            </div>
            <div>
                Album: 
                { this.state.nowPlaying.albumName }
            </div>
            <div>
                <img src={this.state.nowPlaying.albumArt} style={{ height: 150 }} />
            </div>
           <ul>
            {           
                this.state.getAll.map((playlist, index) => (
                <li key={index}> { playlist }</li>
                ))
            }
            </ul>
            {
                <button onClick={() => this.getPlaylists()}>
                    Check Playlists
                </button>
            }

            { 
                this.state.loggedIn &&
                <button onClick={() => this.getNowPlaying()}>
                    Check Now Playing
                </button> 
            }
      </div>
    );
  }
}

export default App;

Answer 1

你能尝试替换...

{this.state.getAll.playlists}

与...

{this.state.getAll.playlists.map(playlist => <div>{playlist}</div>)}

我认为现在您并没有真正遍历播放列表数组。

Answer 2

React 不会那样工作。你可以这样做

render() {
 return (
   <>
     All playlists:
   <ul>
     {
        this.state.getAll.playlist.map((playlist, index) => (
          <li key={index}> { playlist }</li>
        ))
     }
   </ul>
    <button onClick={() => this.getPlaylists()}>
         Check Playlists
     </button>
 </>
 )
}

此外，您需要在构造函数中绑定所有函数或使用箭头函数。

this.getNowPlaying = this.getNowPlaying.bind(this);

我在 React 中遇到的错误：如果你打算渲染一个子集合，请改用数组

Error I'm getting with React: If you meant to render a collection of children, use an array instead

javascript

web-applications

spotify

web

reactjs