Невозможно ссылаться на дочерние объекты во время this.props.list.map ()

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}