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

Question

我有一个相当嵌套的数组，是从 Firebase 获取数据，进行修改并将其作为 props 传递下来形成的。该数组的结构如下图所示: 每个数组（2）的值格式几乎相同。我试图呈现每个'array(2)'[0]对象中的2个月=1、温和=3等数据点以及来自'array(2)' 1的数据点，例如 RWJ=2.5（正上方的0对象是完全相同的数据格式）。我首先尝试使用以下方式呈现密钥“RWJ” 当我尝试执行此操作时，什么也没有呈现。但是，当我调用一个简单的函数将 'thirdData' 记录到控制台时，它会打印出我正在寻找的内容。

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

对于这里发生的事情，我有些困惑，所以任何帮助都将不胜感激。此外，当我使用一个更简单的修改后的Firebase数据数组时，它可以呈现，因此我相信在组件呈现后传递下来的props没有问题。

- Tom Jones

---

在<div>之前你缺少了return。 - loganfsmyth

Answer 1

问题在于你没有从innermost地图函数中返回任何东西。

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

顺便提一下，确保为迭代器分配唯一的键

这里需要注意的一点是 () => {} 和 () => (...) 之间的区别，在第二种情况中，你在 (...) 中编写的所有内容都会明确返回，而在第一种情况中，它是一个块，你需要 返回内容

所以你可以简单地写成

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

- Shubham Khatri