映射数组播放列表返回意外令牌答案

【问题标题】：Map over array playlists return unexpected token映射数组播放列表返回意外令牌
【发布时间】：2018-12-13 11:38:45
【问题描述】：

我正在尝试映射我的播放列表数组这样数组中的每个播放列表都会显示出来

console.log(playlistsArray) 日志

但是

  render() {
  const playlistsArray = this.props.playLists
  console.log(playlistsArray)
    return(


{playlistsArray.map((playlist=>    
   <PlayList
                        playLists={this.props.playLists}
                        selectSong={this.selectSong}
                        selectList={this.selectList}
                    />
                  ))}


  )}

返回意外的令牌。这是为什么呢？

【问题讨论】：

您遍历playlistsArray，并且在每次迭代中，您在map 中得到playlist，但您没有使用它？

标签： javascript reactjs ecmascript-6 redux

【解决方案1】：

地图缺少括号

改变这个

{playlistsArray.map((playlist=>

到这里

{playlistsArray.map((playlist)=>

【讨论】：

【解决方案2】：

有一个拼写错误。

应该是playlistsArray.map(...)，但您使用的是playlistArray。

【讨论】：

【解决方案3】：

尝试从 return return 语句中删除 {}。

render() {
    const playlistsArray = this.props.playLists;
    console.log(playlistsArray);
    return (playlistsArray.map(playlist =>
                <PlayList
                    playLists = { this.props.playLists }
                    selectSong = { this.selectSong }
                    selectList = { this.selectList }
                />)
    );
}

【讨论】：

【解决方案4】：

您的代码中有很多错误。这是正确的代码。请检查差异。

render() {
    const playlistsArray = this.props.playLists
    console.log(playlistsArray)
    return (
        playlistsArray.map((playlist) => <PlayList 
            playLists={this.props.playLists}
            selectSong={this.selectSong}
            selectList={this.selectList}
        />)
    )
}

【讨论】：

我能问你吗，我添加了 key={playlist.id} 所以每个播放列表都有一个唯一的 ID，我想我会取回我的 2 个硬编码播放列表。但它两次返回第一个...这是播放列表的初始状态.. const initState = [ { id:1, title:'Play list 1', data:[ list of song with id, title,artist, album ] }, { id:2, title:'Play list 2', data:[ id, title,artist,album 的歌曲列表] } ]
您实际上是通过执行 playLists={this.props.playLists} 将完整的播放列表数组放入组件的播放列表属性中。请注意，this.props.playLists 包含所有播放列表的列表，而不是特定的播放列表。我猜你在这里真正想做的是 playLists={playlist}
谢谢！解决了。