TypeError：无法读取 REACT 项目中未定义的属性“map”？
我正在开发一个 Codecademy 项目 Jammming，使用 Spotify API 创建播放列表生成器。我搜索了网上的所有内容、其他存储库和视频，但仍然不断收到映射错误。我不确定发生了什么？有什么想法吗？
发布在 github 上： https://github.com/carriepresley/jammming
import React from "react";
import "./TrackList.css";
import Track from "../Track/Track";
class TrackList extends React.Component {
render(){
return (
<div className="TrackList">
{this.props.tracks.map((track) =>{
return <Track
key = {track.id}
track = {track}
/>
})
}
</div>
)
}
}
export default TrackList;
这是一个非常常见的错误，您几乎肯定会再次遇到，但原因各不相同。它通常是由异步加载的数据引起的，这意味着一开始数据是空的（在您的例子中是
tracks
），后来它被一个数组填充，但也有其他原因，我将在后面解释。
有几种方法可以确保这不会破坏您的应用程序。
快速而肮脏的方法是在访问属性之前检查数据是否真实：
data && data.map
。我只建议在没有更好的方法的情况下这样做，有时它可以隐藏错误而不是修复它。
我个人认为最好的做法是确保您的变量默认为空结构，代表数据
将
是什么样子。看起来您已经在
App.js
中执行了此操作，方法是将
searchResults
和
playlistTracks
默认为状态数组。
我更喜欢这样做的原因是，现在如果您仍然收到错误，则知道问题不是异步问题，而是其他问题。例如忘记将 prop 传递到上级几级（ App.js ）：
<SearchResults searchResults = {this.state.searchResults}/>
//<Playlist/>
<Playlist tracks={this.state.playlistTracks} /> // Pass it the prop it needs
Playlist
尝试从
this.props.tracks
为
TrackList
提供 prop
tracks
，但从未从
App.js
提供该 prop，因此它是未定义的。
<TrackList tracks = {this.props.tracks}/> // this.props.tracks is undefined from App
这就是您出现错误“无法读取未定义的属性 .map”的原因。只需检查
this.props.tracks
是否未定义即可停止错误，但会隐藏错误！
尝试：
<div className="TrackList">
{this.props.tracks && this.props.tracks.map((track) =>{
return <Track
key = {track.id}
track = {track}
/>
})
}
</div>
针对问题解决方案：第 34 首曲目对跟随视频演示的人员产生错误 原因：第 32 首曲目在视频中重复了 2 次，因此第 33 首曲目在视频演示中缺失
解决方案：
在 App.js 中查找
<Playlist/>
更改
<Playlist searchResults={this.state.searchResults}/>
在 Playlist.js 中查找
<TrackList />
更改
<TrackList tracks={this.props.searchResults}/>