反应无法使用地图访问道具答案

【问题标题】：React Unable to access props using map反应无法使用地图访问道具
【发布时间】：2020-08-20 18:18:32
【问题描述】：

所以我有一个带有 props.tracks 的 TrackList 组件，它是一个对象数组，但是当我尝试使用以下方法将其传递给 Track 组件时：

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

我得到一个 TypeError: Cannot read property 'map' of undefined.

如果它们未定义，那么为什么它们会显示在 TrackList 组件中？

如果将曲目硬编码到 TrackList 中，那么我可以使用 .map() 访问它们

【问题讨论】：

标签： reactjs

【解决方案1】：

提供的属性tracks 是undefined 或null。为了防止在这种情况下出现错误，您有多种选择

class YourComponent extends React.Component {
 ...
}

YourComponent.defaultProps {
   tracks: [],
}

{this.props.tracks && this.props.tracks.map(
    ...
 )}

{(this.props.tracks || []).map(
   ...
)}

最后一个选项可能是最没用的选项，因为 tracks 属性将在所有其他位置未定义。

【讨论】：

【解决方案2】：

试试这个

{this.props.tracks && 

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

【讨论】：

LEGEND，能否解释一下为什么需要添加？
@joelpeyton 可能是因为在组件首次渲染时数据不在 redux 中，但随后被异步获取，并且稍后在您查看 redux 存储时出现。如果您使用调试器来捕获异常或添加断点，您应该能够看到它的运行情况。
条件渲染 - 仅当 this.props.tracks 有内容时才渲染地图

【解决方案3】：

如果轨道是通过 API 加载的，则在组件安装和道具可用之间可能会有延迟。另一种选择是将tracks prop的默认值设置为空数组。这样可以防止在加载数据时显示错误。

YourComponent.defaultProps = {
  tracks: []
};

【讨论】：