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

Question

我正在关注 React JS 教程，我试图将道具从一个组件传递到另一个组件以呈现曲目列表。 我查看了几个具有类似问题的线程，但没有一个建议解决了我的问题，我不知所措。 我怀疑这个问题与我的初始状态的设置方式有关。

我尝试了以下方法。

无法读取未定义 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;

输出应该是呈现的曲目列表，而不是我得到“类型错误：无法读取未定义的属性“地图”。

类型错误：无法读取未定义的 TrackList.render src/components/TrackList/TrackList.js:11 8 | 的属性“地图” class 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

您实际上是在此处的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 3

应该：

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

将state更改为props

Answer 4

首先控制台this.props.searchResults对信息搜索结果组件然后安慰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

在你的曲目组成部分，你应该使用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;