Question

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

我的数据是这样构成的：

Object > Object > Array

所以我试图完成这样的事情：

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

我知道JSX文件中不允许for循环，但是将对象转换成多个数组似乎也不对，因为我不知道从我的API中可能会有多少个项目。

Answer 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>
    )
  )
}

我希望有一种更优雅的方法。

遍历JSX中的对象

1 个答案: