我正在学习 React JS 教程，并尝试将 props 从一个组件传递到另一个组件，以便呈现曲目列表。我查看了一些有类似问题的线程，但没有任何建议可以解决我的问题，我不知所措。我怀疑这个问题与我的初始状态设置方式有关。

我尝试了以下操作。

无法读取未定义 REACT 的属性“map”

• 按照上述建议，在接收组件时将“this.props”更改为“this.state”，反之亦然，但这并不能解决问题，只会返回“无法读取 null 的属性轨道”

这是我的 App.js，其中定义了初始状态并传递给搜索结果组件

  constructor(props) {
    super(props);

    this.state = {
      searchResults: [
        {
          name:'test', 
          artist:'test',
          album: 'test',
          id:'2'
        },
        {
          name:'test', 
          artist:'test',
          album: 'test',
          id:'2'
        }
      ]
    }
  }
  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;

这是 SearchResults 组件将 props 传递给 TrackList 的地方

class SearchResults extends React.Component { 
    render() {
        return(
            <div className="SearchResults">
            <h2>Results</h2>
                <TrackList tracks = {this.props.searchResults}/>
            </div>
        )
    }
}
export default SearchResults;

这似乎是发生错误的地方。

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

export default TrackList;

最后，应该渲染的轨道类轨道

class Track extends React.Component { 
    render(){

        return( 
                        <div className="Track">
            <div className="Track-information">
                <h3>{this.props.track.name}</h3>
                <p> {this.props.track.artist} | {this.props.track.album}</p>
            </div>
            <button className="Track-action">- + or - will go here --></button>
            </div>
        )
    }
}

export default Track;

输出应为呈现的轨道列表，但我收到“TypeError：无法读取未定义的属性‘map’。

TypeError: Cannot read property 'map' of undefined TrackList.render src/components/TrackList/TrackList.js:11 8 | class TrackList extends React.Component { 9 | render() { 10 | return ( 11 | 12 | {this.props.tracks.map(track => )} 14 |