深层嵌套的对象数组无法渲染

时间：2017-07-13 06:07:27

标签： javascript reactjs ecmascript-6

我有一个相当嵌套的数组，它是从Firebase检索数据，修改它并将其作为道具传递而形成的。数组的结构是 enter image description here

每个数组（2）的值几乎都是相同的格式。我试图从每个'array（2）'[0]对象以及'array（2）'1中的数据点等渲染2个月= 1，温和= 3等数据点。 RWJ = 2.5，（它上方的0对象与数据的确切格式相同）。我尝试使用以下内容首先渲染键“RWJ” enter image description here

当我尝试执行此操作时，没有任何渲染。但是，当我调用一个简单的函数将“thirdData”记录到控制台时，它会打印出我正在寻找的内容。

enter image description here enter image description here 

thirdData = (value) => {
  console.log(value)
}

很遗憾，因为这里发生了什么，所以任何帮助都会受到赞赏。此外，当我使用更简单的修改后的Firebase数据阵列时，它会呈现，所以我很确定在组件渲染后传递道具没有问题。

1 个答案:

答案 0 :(得分：4)

问题是你没有从innermost地图功能中返回任何内容。 

return Object.keys(secondData).map((thirdData, i) => {
     return <div key={i}>
           {this.thirdData(thirdData)}
     </div>
}

P.S。确保为迭代器分配唯一键

这里需要注意的一点是() => {}和() => (...)之间的区别，在第二种情况下，您写的任何内容都在(...)内明确返回，而在第一种情况下它是一个块您需要return the content

所以你可以简单地写一下

return Object.keys(secondData).map((thirdData, i) => (
     return <div key={i}>
           {this.thirdData(thirdData)}
     </div>
)
相关问题
最新问题