映射React中的嵌套JSON对象

Question

我花了几个小时试图弄清楚这一点，但完全失败了。我需要你的帮助。

我有一个JSON文件，我想循环使用它，并创建一个具有多个列的UI，这些列具有多个组，这些组具有不同数量的项。

JSON文件

{
"stuff": "content",
"stuff": "content",
"List" : [
{
"column" : [
{
"group" : [
{ "name" : "item 1" },
{ "name" : "item 2" }
],
"group" : [
{ "name" : "item 3" },
{ "name" : "item 4" },
{ "name" : "item 5" },
{ "name" : "item 6" }
],
"group" : [
{ "name" : "item 7" },
{ "name" : "item 8" },
{ "name" : "item 9" },
{ "name" : "item 10" }
],
}
],
"column" : [
{
"group" : [
{ "name" : "item 11" },
{ "name" : "item 12" },
{ "name" : "item 13" },
{ "name" : "item 14" }
],
"group" : [
{ "name" : "item 15" },
{ "name" : "item 16" },
],
"group" : [
{ "name" : "item 17" },
{ "name" : "item 18" },
{ "name" : "item 18" },
],
}
]
}
]
}

反应成分：

import Data from 'data.json'
...
{Data.List.map((columnItem, index) => (
<div className="column">
{columnItem.column.map((groupItem, index) => (
<div className="group">
{groupItem.group.map((item, index) => (
<div>
{item.name}
</div>
))}
</div>
))}
</div>
))}
...

问题是我只得到一件物品作为回报
我觉得我用.map完全错误地处理了这个问题
有什么想法吗？我很感激你的帮助。

Answer 1

数据已损坏。您有重复的密钥数据。

{
"stuff": "content",
"stuff": "content",
"List" : [
{
"group" : [
{ "name" : "item 1" },
{ "name" : "item 2" }
]
},
{
"group" : [
{ "name" : "item 11" },
{ "name" : "item 12" },
{ "name" : "item 13" },
{ "name" : "item 14" }
]
}
]
}
]
}

Answer 2

问题是，在每个对象中都有多次相同的键，后面的键会覆盖前一个，所以第二个column对象会覆盖上一个column对象。group键也是如此。您可以通过打印Data对象来证明这一点：

let data={stuff:"content",stuff:"content",List:[{column:[{group:[{name:"item 1"},{name:"item 2"}],group:[{name:"item 3"},{name:"item 4"},{name:"item 5"},{name:"item 6"}],group:[{name:"item 7"},{name:"item 8"},{name:"item 9"},{name:"item 10"}]}],column:[{group:[{name:"item 11"},{name:"item 12"},{name:"item 13"},{name:"item 14"}],group:[{name:"item 15"},{name:"item 16"}],group:[{name:"item 17"},{name:"item 18"},{name:"item 18"}]}]}]};
// open the dev tool to see the table
console.table(data)