如何渲染包含嵌套对象的数组中的数据？

我尝试循环渲染带有多层嵌套结构的对象数组，但没能成功实现。以下是我的代码：

const DATA = [
  {
    title: "Apple",
    fields: {
      title: "iPhone",
      fields: {
        title: "14 pro",
        fields: {},
      },
    },
  },
  {
    title: "Xiaomi",
    fields: {
      title: "phone",
      fields: {
        title: "MI 5",
        fields: {},
      },
    },
  },
];

const itemsRender = (item, idx) => {
  const key = Object.keys(item).at(-1);
  return (
    <div key={idx}>
      <p>{item[key].title}</p>
      {!isEmpty(item[key]?.fields) &&
        Object.values(item[key]?.fields).map(itemsRender)}
    </div>
  );
};

return <> {DATA.map(itemsRender)} </>;

相关截图：

问题修复方案 #

你的代码里有几个明显问题：

1. 属性获取逻辑错误：Object.keys(item).at(-1)取的是每个对象的最后一个键，第一层对象最后一个键是fields，这直接导致最外层的Apple、Xiaomi这些标题被跳过了。
2. 递归调用逻辑错配：fields本身是单个对象，你用Object.values把它拆成了键值对数组，递归时处理的不是完整的嵌套对象，自然渲染不对。

修复后的代码：

// 假设你使用lodash的isEmpty判断空对象，若没有可自行实现：const isEmpty = obj => Object.keys(obj).length === 0;
import { isEmpty } from 'lodash';

const DATA = [
  {
    title: "Apple",
    fields: {
      title: "iPhone",
      fields: {
        title: "14 pro",
        fields: {},
      },
    },
  },
  {
    title: "Xiaomi",
    fields: {
      title: "phone",
      fields: {
        title: "MI 5",
        fields: {},
      },
    },
  },
];

const itemsRender = (item, idx) => {
  return (
    <div key={idx}>
      <p>{item.title}</p>
      {/* 检查fields非空时，直接递归渲染fields对象 */}
      {!isEmpty(item.fields) && itemsRender(item.fields, `${idx}-child`)}
    </div>
  );
};

return <> {DATA.map(itemsRender)} </>;

关键说明 #

• 直接访问当前对象的title，不用绕弯子取最后一个键，确保每一层标题都能正常显示。
• 递归时直接传入item.fields这个完整对象，因为它本身就符合渲染函数的参数结构，不需要转数组。
• 递归的key拼接了-child，避免同层级key重复，符合React的key要求。

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