Question

我的React项目组件结构非常简单：App >> SearchResults >> TrackList。为了进行测试，我输出了每个组件中的数据值。在 App.js 文件中，我使用this.state定义了一个名为 searchResults 的对象数组。

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: [
        {
          name: 'name-1',
          artist: 'artist-1',
          alblum: 'alblum-1',
          id: 101
        },
        {
          name: 'name-2',
          artist: 'artist-2',
          alblum: 'alblum-2',
          id: 202
        }
      ]
    }
  }
  render() {
    console.log('Here is App.js', this.state.searchResults);
    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.js 文件中，我使用tracks = {this.props.searchResults}将数据传递给子组件。

class SearchResults extends React.Component {
  render() {
    console.log('Here is SearchResults.js', this.props searchResults);
    return (
      <div className="SearchResults">
        <h2>Results</h2>
        <TrackList tracks={this.props.searchResults} />
      </div>
    );
  }
}

export default SearchResults;

在 TrackList.js 文件中，我从父组件输出数据。

class TrackList extends React.Component {

  render() {
    console.log('Here is TrackList.js', this.props.tracks);
    return (
      <div className="TrackList">
        {this.props.tracks.map(track => <Track key={track.id} track={track} />)}
      </div>
    );
  }
}

export default TrackList

但是，发生奇怪的事情，控制台将数据打印两次，第一次显示正常值，第二次未定义。因此，我无法对数据使用.map（）函数。为什么会发生这种情况，以及如何解决？

控制台屏幕截图位于此处：Console

当this.props传递给子组件时，它变为未定义

0 个答案: