React组件传参出现TypeError: this.props.tracks.map is not a function求助

报错TypeError: this.props.tracks.map is not a function的核心原因是你调用数组push方法时搞错了返回值，把数字类型的值赋值给了原本应该是数组类型的playlistTracks状态：

• App组件的addTrack方法中，let newPlaylistTracks = playlistTracks.push(track);写法错误：数组的push()方法返回值是数组新增元素后的长度（数字类型），不是修改后的新数组
• 你后续把这个数字赋值给state的playlistTracks字段，再通过props传给Playlist组件的TrackList时，this.props.tracks实际是数字，自然没有map方法，触发报错

把addTrack方法修改为如下写法即可：

addTrack (track) {
  let playlistTracks = this.state.playlistTracks;
  
  if (playlistTracks.find(trackin => trackin.id === track.id)) {
    return
  }
  // 推荐写法：用扩展运算符生成新数组，避免直接修改原state
  this.setState({
    playlistTracks: [...playlistTracks, track]
  })
}

为了避免后续同类问题，可以给TrackList组件加一层兜底判断，保证tracks是数组时才执行map：

class TrackList extends React.Component {
    render () {
        const { tracks = [] } = this.props; // 缺省值兜底
        return (
            <div className="TrackList">
        {tracks.map((track) => { 
              return <Track track={track} key={track.id} onAdd={this.props.onAdd} isRemoval={this.props.isRemoval} />
            })}
         </div>
        )
    }
}

内容的提问来源于stack exchange，提问作者borhen KALBOUSSI