Question

我映射到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，则表示无法读取未定义的属性名称。

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

Answer 1

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

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

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

在this.props.list.map（）期间无法引用子对象

1 个答案: