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组件将道具传递到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：无法读取未定义的属性“ map” TrackList.render src / components / TrackList / TrackList.js：11 8 | TrackList类扩展了React.Component { 9 | render（）{ 10 |返回（ 11 | 12 | {this.props.tracks.map（track =>）} 14 |

Answer 1

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

我正在Codecademy上做同样的课程。您仍然收到错误的原因是，在PlayList.js中，有一个TrackList组件正在渲染，但是没有任何道具。因此，在TrackList类中，没有要映射的道具。

Answer 2

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

<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 3

应该是：

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

将state更改为props

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;

如何解决React Js中的“无法读取未定义的属性'map'”错误

5 个答案: