时间戳

首页 > 解决方案 > 在 this.props.list.map() 期间无法引用子对象

reactjs - 在 this.props.list.map() 期间无法引用子对象

问题描述

我正在映射 this.props 列表，列表中的每个元素都有一些子对象。但是，如果我尝试引用任何子对象，它们是未定义的。

这是循环

this.props.sparts.map((spart) => {
      sparts2.push(
          <div className="ui column wide spart-container" key="{spart.id}">
            <div className="fake-img"></div>
            <div className="audio-container">
              {spart.audio}
            </div>
            <div className="writing-container">
              {spart.name}
            </div>
          </div>
      )
    })

示例对象：

{
  "name": "test name",
  "audio": {
    "name": "some name",
    "file_path": "some path"
  }
}

我可以很好地引用任何立即值（如名称），但如果我尝试引用 spart.audio.name，它会显示无法读取未定义的属性名称。

为什么我不能引用子对象？

标签： reactjsreduxreact-redux

解决方案

我能想到的一个原因是，并非数组中的每个项目都有一个audio孩子。因此，它是未定义的音频，而不是音频的子级。

使用三元运算符来解决这个问题

{spart.audio ? spart.audio.name : null}

推荐阅读