简短回答

Question

我无法从JSON读取数据。安装组件后，我检查了数据是否从控制台以组件状态存储。在return语句中，我尝试使用map方法从JSON数据呈现url字符串。当我从控制台记录数据信息时，可以在'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

从我可以从数据看，它看起来像你的data具有包含对象的数组形状，您张贴的属性multimedia。

因此，在这种情况下，你的代码应该是这样的：

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

否则，如果您的data已经是这些对象的数组，则可以直接执行以下操作：

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

Answer 2

简短回答

它无法从multimedia属性读取的原因是，您正试图使用从multimedia属性生成的索引来访问this.state.data属性。因此，可能是您当前的索引大于multimedia数组中的项目。

说明

所以，如果你有例如...

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

您地图将开始寻找在数据阵列中的第一个元素，并通过随着elm变量将与第一元件，等等...被填充，但在访问所述第三元件时data数组，你会得到与multimedia数组中只有2项的对象，但因为你所访问的第三个元素this.state.data，您的idx变量将是设置为2，并且在尝试访问elm.multimedia[idx].url时将失败，因为elm.multimedia[2]对于第3个元素是未定义的。

尝试使用React.js中的map访问特定JSON数据时出现问题

2 个答案:

简短回答

说明