reactjs - 反应无法使用地图访问道具

Question

所以我有一个带有 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

Answer 1

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

1. 使用 defaultProps

class YourComponent extends React.Component {
 ...
}

YourComponent.defaultProps {
   tracks: [],
}

2. 条件渲染

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

3. 设置默认值

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

最后一个选项可能是最没用的选项，因为该tracks属性在所有其他地方都未定义。