如何解决 React Js 中的“无法读取未定义的属性‘映射’”错误

Question

我正在学习 React JS 教程，我正在尝试将道具从一个组件传递到另一个组件以呈现轨道列表。我看过几个有类似问题的线程，但没有一个建议能解决我的问题，我很茫然。我怀疑这个问题与我的初始状态的设置方式有关。

我尝试了以下方法。

Cannot read property 'map' of undefined REACT

• 按照上面的建议在接收组件时将“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：无法读取未定义的属性“地图” TrackList.render src/components/TrackList/TrackList.js:11 8 |类 TrackList 扩展 React.Component { 9 |使成为（） { 10 |返回 （ 11 | 12 | {this.props.tracks.map(track => )} 14 |

Answer 1

从 PlayList render() 方法中注释掉 TrackList 组件，它应该可以工作。

我在 codecademy 上同样的课程。您仍然收到错误的原因是因为在 PlayList.js 中有一个 TrackList 组件在那里呈现但没有任何道具。所以在 TrackList 类中，没有要映射的道具。

Answer 2

应该是：

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

将state 更改为props

Answer 3

您实际上是在TrackList 组件中设置属性tracks：

<TrackList tracks = {this.props.searchResults}/>

tracks 这里不是状态，它是组件的属性（即props）。
因此，您可能需要更改以下行：

{this.state.tracks.map(track => <Track key={track.id}

收件人：

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

这应该可以解决您的问题。

Answer 4

SearchResult 组件中的第一个控制台 this.props.searchResults 然后是 TrackList 组件中的控制台 this.props.tracks，然后 替换

 {this.state.tracks.map(track => <Track key={track.id} 

到

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

Answer 5

在您的 TrackList 组件中，您应该使用 this.props.tracks.map.... 而不是 this.state.tracks.map...，因为您将数据作为 tracks 属性的值传递给此组件。

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

export default TrackList;