Проблема при попытке доступа к определенным данным JSON с использованием карты в React.js

Question

Я не могу прочитать данные из JSON.Я проверил, что данные сохраняются в состоянии компонента из консоли после того, как компонент был смонтирован.В операторе return я попытался отобразить строку url из данных JSON, используя метод map.Когда я записываю информацию о данных из консоли, данные можно найти в «this.state.data» или «elm», но когда в конце добавляется «multimedia [idx]», он говорит, что не может найти данные.Я хочу знать причину этого.

this.state.data.map((elm, idx) =>
//...
<div>{elm.multimedia[idx].url}</div>
//...

Форма данных JSON мультимедийного элемента, зарегистрированного из консоли:

(29) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, undefined, {…}]

0:{
  caption: "string",
  copyright: "string",
  format: "mediumThreeByTwo210",
  height: 140,
  subtype: "photo",
  type: "image",
  url: "https://static01.nyt.com/images/2019/02/05/science/05SCI-ZIMMER1/05SCI-ZIMMER1-mediumThreeByTwo210.jpg",
  width: 210
}

Answer 1

Краткий ответ

Причина, по которой он не может прочитать из свойства multimedia, заключается в том, что вы пытаетесь получить доступ к свойству multimedia с помощью индекса, созданного из свойства this.state.data.Поэтому, возможно, ваш текущий индекс больше, чем элементы в массиве multimedia.

Объяснение

Итак, если у вас есть, например, ...

this.state.data = [
  {multimedia: [{}, {}, {}]},
  {multimedia: [{}, {}, {}]},
  {multimedia: [{}, {}]},
]

Ваша карта начнет смотреть на первый элемент в массиве данных и передаст его как переменную elm, которая будет заполнена первым элементом, и так далее ... но при доступе к третьему элементу в data массив, вы получите объект только с 2 элементами в массиве multimedia, но так как вы обращаетесь к третьему элементу this.state.data, ваша переменная idx будет установлена ​​в 2, и при попыткеполучить доступ к elm.multimedia[idx].url не удастся, потому что elm.multimedia[2] не определено для третьего элемента.

Answer 2

Из того, что я вижу из ваших данных, похоже, что у вашего data есть атрибут multimedia, который содержит массив объектов с формой, которую вы разместили.

Таким образом, в этом случае ваш код должен выглядеть примерно так:

this.state.data.multimedia.map((elm, idx) =>
//...
<div>{elm.url}</div>

В противном случае, если ваш data уже является массивом этих объектов, вы можете напрямую сделать что-то вроде:

this.state.data.map((elm, idx) =>
//...
<div>{elm.url}</div>