Почему это ошибка при рендеринге компонента?

Question

Я пытаюсь отобразить состояние с помощью реквизита для вложенного компонента. Это то, что у меня есть в моем App.js:

class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      searchResults: [
        {name: 'Money Trees',
        artist: 'Kendrick Lamar',
        album: 'Album Title',
        id: '1234'},

        {name: 'Reptilia',
        artist: 'The Stroks',
        album: 'Is This It',
        id: '234'}
      ]
    };
  }
  render() {
    return (
      <div>
        <h1>
          Ja<span className="highlight">mmm</span>ing
        </h1>
        <div className="App">
          <SearchBar />
          <div className="App-playlist">
            <SearchResults searchResults={this.state.searchResults} />
            <Playlist />
          </div>
        </div>
      </div>
    );
  }
}

export default App;

Внутри Playlist.js У меня есть это:

class Playlist extends React.Component {
  render() {
    return (
      <div className="Playlist">
        <input defaultValue={'New Playlist'} />
        <Tracklist />
        <a className="Playlist-save"></a>
      </div>
    );
  }
}

export default Playlist;

Теперь я могу передавать реквизиты треков через компонент SearchResults и в компонент Tracklist. Тем не менее, я получаю сообщение об ошибке при попытке сопоставить трек проп:

TypeError: Cannot read property 'map' of undefined

Когда я удаляю компонент списка воспроизведения из файла приложения, ошибка исправляется. Я не уверен, почему я получаю ошибку, когда добавляю <Playlist /> в основной файл App.js. Может ли кто-нибудь помочь мне понять это?

Вот как Tracklist.js выглядит:

class Tracklist extends React.Component {
  constructor(props){
    super(props);
  }
  render() {
    return (
      <div className="TrackList">
        {this.props.tracks.map(track => <Track track={track} key={track.id} />)}
      </div>
    );
  }
}

export default Tracklist;

Answer 1

Playlist отображает Tracklist и ожидает tracks реквизита.

Попробуйте:

class Playlist extends React.Component {
  render() {
    return (
      <div className="Playlist">
        <input defaultValue={'New Playlist'} />
        <Tracklist tracks={[]} />
        <a className="Playlist-save"></a>
      </div>
    );
  }
}

Чтобы проверить, исчезла ли ошибка.