Question

2020-05-05

150

reactjs

因此，我有一个 TrackList 组件，其中 props.tracks 是一个对象数组，但是当我尝试使用以下命令将其传递给 Track 组件时：

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

我收到 TypeError：无法读取未定义的属性“map”。

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

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

Answer 1

提供的属性 tracks 为 undefined 或 null 。为了防止这种情况发生错误，您有几种选择

class YourComponent extends React.Component {
 ...
}

YourComponent.defaultProps {
   tracks: [],
}

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

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

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

Answer 2

尝试一下

{this.props.tracks && 

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

Answer 3

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

YourComponent.defaultProps = {
  tracks: []
};