reactjs - 道具最初正确，然后第二次渲染导致它们消失

Question

我目前正在学习 Codecademy 全栈课程，并构建了一个 React 项目。

到目前为止，它有几个组件，但这三个让我很烦恼。

应用程序.js

class App extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      searchResults: [{ name: 'Hello', artist: 'Hey there', album: 'Woah!', id: 12345 }]
    }
  }
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;

搜索结果

class SearchResults extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div className="SearchResults">
                <h2>Results</h2>
                <TrackList tracks={this.props.searchResults} />
            </div>
        )
    }
}

曲目列表

class TrackList extends React.Component {
    constructor(props) {
        super(props)
        
        console.log(props);
    }

    render() {
        return (
            <div className="TrackList">
            
                { this.props.tracks.map(track => {
                    <Track 
                        name={track.name}
                        artist={track.artist}
                        album={track.album}  />
                }) }

            </div>
        )
    }
}

最初，app.js 具有称为“searchResults”的状态，它是一个硬编码数组，其中包含一个具有一些属性的对象。这通过一个名为 searchResults 的道具传递给 SearchResults 组件，然后通过另一个名为“tracks”的道具传递给 TrackList。

然后我想通过传递下来的道具进行映射并在屏幕上呈现结果。

但是，每当我尝试加载我的应用程序时，在评估“this.props.tracks.map”时都会收到“未定义错误”。添加控制台日志后，我相信这是因为我的应用程序呈现两次 - 即我的控制台中有两个控制台日志。

第一个日志包含传递下来的 searchResults 状态。第二个返回“未定义”。

我不知道为什么会这样，但有谁知道如何解决这个问题以及为什么我的道具最初出现然后被重新加载并变得未定义？

如果有任何遗漏或您需要澄清，请告诉我！

标签： reactjs