反应：this.props.item 未定义

Question

我尝试将数组从一个组件传递到另一个组件，然后从该组件传递到另一个组件，但我的项目未定义。 App.js 从该文件中，我尝试将 this.state.searchResults 传递给 SearchResults 组件。

import React from 'react';
import './App.css';
import SearchBar from '../SearchBar/SearchBar';
import SearchResults from '../SearchResults/SearchResults';
import Playlist from '../Playlist/Playlist';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      searchResults: [
        {name: 'name1', artist: 'artist1', album: 'album1', id: 1},
        {name: 'name2', artist: 'artist2', album: 'album2', id: 2},
        {name: 'name3', artist: 'artist3', album: 'album3', id: 3}
      ]
    };
  }

  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.js 在这里我尝试将收到的 this.props.searchResults 传递给 TrackList 组件

import React from 'react';
import './SearchResults.css';
import TrackList from '../Tracklist/Tracklist';

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

export default SearchResults;

TrackList.js

import React from 'react';
import './Tracklist.css';
import Track from '../Track/Track';

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

    render() {
        return(
            <div className="TrackList">
                {this.props.track.map(track => <Track track={track} key={track.id} />)}
            </div>
        );
    }
}

export default Tracklist;

但是，如果我在 this.props.tracks 上使用 map 方法，则表示此方法不能用于未定义。 怎么了？

Answer 1

尝试用 TrackList.js 中的以下代码替换

<div className="TrackList">
   {this.props.track.map(track => <Track track={track} key={track.id} />)}
</div>

希望这可以帮助

Answer 2

问题在这里

{this.props.track.map(track => <Track track={track} key={track.id} />)}

它应该是轨道而不是轨道

{this.props.tracks.map(track => <Track track={track} key={track.id} />)}

此外，如果您想通过 props 直接在 React 中的组件之间共享数据，您可以使用React Context