React中多层嵌套对象数组的map遍历渲染问题

我有一个包含多层children的对象数组，想在React里按顺序渲染这些数据。目前能实现两层map嵌套遍历渲染，但尝试加第三层map遍历item2的children时，出现“Cannot read properties of undefined (reading 'map')”错误（已确认item2存在children），请问能不能实现三层嵌套map？

可正常运行的两层嵌套代码示例 #

org = workplaces.map((item) =>
  <ul className="" style={{ background: "grey" }}>
    <li>{item.workplace}</li>
    {item.children.map((item2) => {
      return <li>{item2.workplace}</li>
    })}
  </ul>
)

报错的三层嵌套代码示例 #

org = workplaces.map((item) =>
  <ul className="" style={{ background: "grey" }}>
    <li>{item.workplace}</li>
    {item.children.map((item2) => {
      item2.children.map((item3) => {
        return <li>{item3.workplace}</li>
      })
      return <li>{item2.workplace}</li>
    })}
  </ul>
)

完全可以实现三层嵌套map，你的代码报错主要有两个核心问题：

1. 未返回第三层map的渲染结果：在item2的map回调函数中，你执行了item2.children.map但没有将其返回值纳入JSX结构，当前回调仅返回了<li>{item2.workplace}</li>，第三层的渲染结果被直接丢弃。
2. 缺少空值防御：即便确认item2存在children，仍建议在调用map前添加空值判断（比如使用可选链操作符?.），避免数据异常时触发报错。

修正后的代码如下：

org = workplaces.map((item) =>
  <ul className="" style={{ background: "grey" }}>
    <li>{item.workplace}</li>
    {item.children?.map((item2) => (
      <>
        <li>{item2.workplace}</li>
        {/* 第三层嵌套map，添加可选链做空保护，同时返回渲染结果 */}
        {item2.children?.map((item3) => (
          <li>{item3.workplace}</li>
        ))}
      </>
    ))}
  </ul>
)

关键说明：

• 使用React Fragment（<>）包裹item2和item3的列表项，确保ul标签下的DOM结构合法（ul仅允许li、ol、ul等作为子元素）。
• 对所有children的map调用添加?.可选链操作符，避免因某个节点的children为undefined或null时抛出错误。
• 确保第三层map的结果被包含在回调函数的返回值中，这样对应的节点才能被正确渲染。

内容的提问来源于stack exchange，提问作者Hejhejhej123