TypeError：无法读取 REACT 项目中未定义的属性“映射”？答案

【问题标题】：TypeError: Cannot read property 'map' of undefined in REACT project?TypeError：无法读取 REACT 项目中未定义的属性“映射”？
【发布时间】：2021-03-01 04:30:58
【问题描述】：

我正在开发一个 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;

【问题讨论】：

标签： reactjs dictionary components

【解决方案1】：

这是一个非常常见的错误，您几乎肯定会再次遇到，但其原因各不相同。它通常是由异步加载的数据引起的，这意味着一开始数据是空的（在你的情况下tracks），后来它被一个数组填充，但还有其他原因，我稍后会解释。

有几种方法可以确保这不会破坏您的应用。

快速而肮脏的方法是在访问属性之前检查数据是否真实：data && data.map。如果没有更好的方法，我只建议这样做，它有时可以隐藏错误而不是修复它。

我个人认为最好的做法是确保您的变量默认为表示数据将是什么样子的空结构。看起来您已经在 App.js 中执行此操作，默认 searchResults 和 playlistTracks 是状态数组。

我更喜欢这个的原因是，现在如果您仍然遇到错误，您就知道问题不是异步问题，而是其他问题。比如忘记将道具向上传递几级（App.js）：

<SearchResults searchResults = {this.state.searchResults}/>
//<Playlist/> 
<Playlist tracks={this.state.playlistTracks} /> // Pass it the prop it needs

Playlist 试图从this.props.tracks 给TrackList 提供道具tracks，但从未从App.js 提供该道具，所以它是未定义的。

<TrackList tracks = {this.props.tracks}/> // this.props.tracks is undefined from App

这就是您出现错误“无法读取未定义的属性 .map”的原因。简单地检查this.props.tracks 是否未定义将停止错误，但会隐藏错误！

【讨论】：

谢谢布赖恩！！这个解释非常有帮助！

【解决方案2】：

试试：

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

【讨论】：

成功了！非常感谢克里莫！

【解决方案3】：

对于问题解决方案：跟踪 34 生成一个错误给谁跟随视频演练原因：视频中的 32 号轨道重复了 2 次，因此视频演练中缺少 33 号轨道

解决方案：

在 App.js 中查找

<Playlist/>

改变

<Playlist searchResults={this.state.searchResults}/>

在 Playlist.js 中查找

<TrackList />

改变

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

【讨论】：