React Object of Objects - 如何循环遍历答案

【问题标题】：React Object of Objects - How to loop throughReact Object of Objects - 如何循环遍历
【发布时间】：2018-02-15 15:32:20
【问题描述】：

我有以下编码的 JSON：

const data = JSON.parse('{"first":{"aaa":"111","bbb":"2222"},"second":{"aaa":"111","bbb":"2222"}}')

解码后如下：

{
  "first": {
    "aaa": "111",
    "bbb": "2222"
  },
  "second": {
    "aaa": "111",
    "bbb": "2222"
  }
}

然后我尝试了几种方法来循环遍历这些数据，如下所示，但没有按预期工作：

{Object.keys(data).map((key, value) =>
    console.log(key);
    <li>{value.aaa}</li>
)}

我可以控制台注销数据并看到它循环，但我看不到显示 aaa 或 bbb 值。

我在这里做错了什么？

谢谢亚当

【问题讨论】：

【解决方案1】：

您可以分配一个保存值的变量。

var a = {
  "first": {
  "aaa": "111",
  "bbb": "2222"
},
"second": {
 "aaa": "111",
 "bbb": "2222"
 }
}

使用以下获取密钥：

 var keys = Object.keys(a);

最后迭代它：

for(var i = 0; i < keys.length; i++) { 
    var key = (keys[i]) ; 
    console.log(a[key]) 
}

【讨论】：

【解决方案2】：

使用for in 循环：

{for (key in data) {
    for (innerKey in data[key]) {
        <li>{data[key][innerKey]}</li>
    }
}}

我们需要在key 和innerKey 周围使用方括号是因为需要先计算这些属性。

【讨论】：

【解决方案3】：

尝试使用

{Object.keys(data).map((key, index) =>
    <li key={index}>{data[key].aaa}</li>
)}

【讨论】：

【解决方案4】：

我成功运行了您的代码。基本上没问题，只需要从 .map 中更改属性名称“key”，因为它与 react 关键字冲突。

 {Object.keys(data).map((label, index) => (
                <div key={index}>{data[label].aaa}</div>
            ))}

【讨论】：