Map 在 React 中嵌套 JSON object

Question

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

我有一个 JSON 文件，我想循环并创建一个 UI，该 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

the problem is that you have the same keys more than onetime in each object the later keys override the previous one so the second column object override the previous column object the same is true for group key you can demonstrate this by printing Data object:

 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)