深度嵌套的对象数组未呈现 [英] Deep nested array of objects not rendering

问题描述

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

每个数组(2) 都有几乎相同格式的值.我正在尝试渲染每个 'array(2)'[0] 对象中的 2 个月 = 1、轻度 = 3 等数据点以及来自 'array(2)'

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

thirdData = (value) =>{控制台日志(值)}

这里发生的事情也很迷茫，所以任何帮助将不胜感激.此外，当我使用更简单的修改过的 Firebase 数据数组时，它会呈现，所以我很确定在组件呈现后传递的道具没有问题.

解决方案

问题是您没有从 innermost 映射函数内部返回任何内容.

return Object.keys(secondData).map((thirdData, i) => {返回 
{this.thirdData(thirdData)}
}

附言确保您也为迭代器分配了唯一键

这里需要注意的一点是 () =>{} 和 () =>(...)，在第二种情况下，您在 (...) 中编写的任何内容都会显式返回，而在第一种情况下，它是一个您需要 的块返回内容

所以你可以简单地写

return Object.keys(secondData).map((thirdData, i) => (返回 
{this.thirdData(thirdData)}
)

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

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

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)
}

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>
}

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屋！