循环遍历 JSX 中的对象答案

【问题标题】：Loop through Object in JSX循环遍历 JSX 中的对象
【发布时间】：2019-09-23 03:19:37
【问题描述】：

在一个 JSX 文件上，我需要遍历一个 Object 的两个级别来呈现每个内部 Array 存储的信息。它看起来像：Object > Object > Array

我的数据结构如下：

const data = {
  group1: {
    subgroup1: [{...}, {...},{...}],
    ...
  },
  ...
}

所以我正在尝试完成这样的事情：

return (
  <ul>
    for (group in data) {
      <li>Group Name
        <ul>
          for(subgroup in group) {
            <li>Subgroup Name
              <ul>
                subgroup.map()
              </ul>
            </li>
          }
        </ul>
      </li>
    }
  </ul>
)

我知道在 JSX 文件中不允许使用 for 循环，但是将我的对象转换为多个数组似乎也不正确，因为我不知道有多少项可能来自我的 API。

【问题讨论】：

subgroup1: {[...], [...]} 不应该是对象数组[{...}, {...}] 或数组数组[[...], [...]]？ {[...]} 语法无效。
您可以使用 Object.entries(data).map() 之类的东西来遍历数据中的每个键/值对，然后对子组进行同样的操作，等等...
杰克，我已经修正了语法。感谢您的提醒！
有了上面提到的 Object.entries 和 this，你应该可以开始了。在不相关的说明中，考虑到它的嵌套程度，在一堆无序列表上使用表格不是更有意义吗？

标签： javascript reactjs loops object jsx

【解决方案1】：

我使用 Herohtar 的建议解决了这个问题，以数组格式提取每个父对象的键/值：

{
  Object.entries(data).map(group => (
      <ul key={group[0]}>
        <li>{group[0]}
          <ul>
            {
              Object.entries(group[1]).map(subgroup => (
                  <ul key={subgroup[0]}>
                    <li>{subgroup[0]}
                      <ul>
                        {
                          subgroup[1].map(item => (
                              <li key={item.code}>{item.name}</li>
                            )
                          )
                        }
                      </ul>
                    </li>
                  </ul>
                )
              )
            }
          </ul>
        </li>
      </ul>
    )
  )
}

我希望有一种更优雅的方式来做到这一点。

【讨论】：