深层嵌套的对象数组无法渲染 [英] Deep nested array of objects not rendering

问题描述

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

I have a fairly nested array which is formed from retrieving data from Firebase, modifying it and passing it down as props. The structure of the array is

每个数组（2）的值几乎都是相同的格式。我试图从每个'array（2）'[0]对象中渲染2个月= 1，轻度= 3等数据点，以及从'array（2）'

Every array(2) has values pretty much in the same format. I'm trying to render the 2 months = 1, mild = 3, etc. datapoints from each 'array(2)'[0] object as well as the datapoints from 'array(2)' 1 such as RWJ = 2.5, (the 0 object right above it is the same exact format of data). I tried to first render the key 'RWJ' using the following

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

When I try to execute this, nothing renders. However, when I call a simple function which logs 'thirdData' to the console, it prints out exactly what I'm looking for.

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

因为太多而丢失了继续在这里，所以任何帮助将不胜感激。此外，当我使用更简单的修改后的Firebase数据阵列时，它会呈现，所以我很确定在组件渲染后传递道具没有问题。

Pretty lost as too whats going on here, so any help would be appreciated. Also, when I use a much simpler array of the modified Firebase data, it renders, so I'm pretty sure there's no problem with the props being passed down after the component renders.

推荐答案

问题是你没有从最里面的地图功能。

The problem is that you are not returning anything from inside the innermost map function.

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

PS确保为迭代器分配唯一键

P.S. Make sure you assign unique keys to iterator as well

这里要注意的一点是（）=> {} 和（）=>（...），在第二种情况下，无论你写什么在（...）内显式返回，而在第一种情况下，它需要的块返回内容

One thing to note here is the difference between () => {} and () => (...), in the second case whatever you write is within (...) is returned explicitly whereas in the first case its a block from which you need to return the content

所以你可以简单地写一下

so you could have simply written

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

这篇关于深层嵌套的对象数组无法渲染的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！