Javascript 反应-。将道具映射为未定义道具

我遇到了一个关于道具和.map方法的问题（见下面的代码）

我正在将一个道具传递给这个孙子组件（一个由2个对象组成的数组）！在React-dev工具上，我的道具传递得很好。但有一次，我试图用.map方法来处理数组以显示内容，我遇到了这个问题->无法读取未定义的属性“map”

我已经验证了许多设置，但没有任何允许克服它

提前感谢,

保罗

从“React”导入React；
导入“./TrackList.css”；
从“../Track/Track”导入轨迹；
类TrackList扩展了React.Component{
render（）{
返回(
{this.props.tracks.map（（track）=>{
返回；
})}
);
}
}
导出默认轨迹列表；

我认为问题在于渲染方法

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

{this.props.tracks.map（（track）=>{
返回；
})}

与上面的代码不同，您的代码应该如下所示

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

{this.props.tracks&&this.props.tracks.length>0&&this.props.tracks.map（（track）=>{
返回；
})}

这意味着在渲染组件时，

This.props.tracks

是

未定义的

。您必须向

render（）

函数添加某种存在性检查：

render() {
  if (!this.props.tracks) {
    return ( /* JSX view for when tracks are undefined */ );
  }

  return ( /* your .map code here */ );
}

---

您还可以使用

道具类型为
[]
的
this.props.tracks
提供默认值。您可以在React的官方网站上阅读更多信息。
谢谢Sabbir，它正在工作：）但我不明白为什么，您的条件是“如果轨迹为真且轨迹高于0，那么.map”那么允许轨迹通过.map方法读取的魔法是什么？换句话说，为什么要用这种方式定义轨迹？您可以将this.props.tracks记录在渲染方法中，您将看到为什么需要检查这些轨迹。在大多数情况下，我们传递的道具来自另一个组件。这就是为什么一开始它是未定义的，在实际的道具被传递之后，它会得到值并呈现。您只能在iterables上调用
map（）
this.props.tracks
检查它是否
未定义
this.props.tracks.length>0
检查它是否可编辑且包含0个以上的项目。检查它是否大于零对于您的组件可能不是必需的，只需
这个.props.tracks.length
就足够了。我更理解，谢谢你们澄清这一点@heez，实际上>0检查是必要的，因为如果长度为0，它将是错误的。感谢heez的回复，我已经尝试了Sabbir解决方案（如下），它运行良好。我强烈建议使用PropTypes对传递给组件的道具进行类型检查，而不要将渲染函数与
未定义的
和
null
存在性检查混在一起。我记下了这一点，非常感谢@heezSimple add default value
const{tracks=[]}=this.props。。。。。（tracks.map）.
，您不需要添加任何额外的检查
render() {
  if (!this.props.tracks) {
    return ( /* JSX view for when tracks are undefined */ );
  }

  return ( /* your .map code here */ );
}