求助：如何将嵌套对象转为嵌套数组适配React Native表格组件

问题场景 #

从API获取到嵌套格式的对象数据，需在React Native表格组件中展示，但组件无法直接解析嵌套对象，需将其转换为嵌套数组后再映射渲染。尝试的初始代码如下：

const X= Object.values(data.data.items.fields);

X.map((rowData, index) => (
                <Row
                  key={index}
                  data={rowData}
                  ))
              />

解决方案 #

当前代码仅将外层对象转为数组，但rowData若为嵌套对象，表格组件仍无法解析。需根据表格Row组件的数据格式要求，对嵌套对象做进一步转换：

1. 转换为嵌套键值对数组（保留层级） #

如果Row组件支持渲染嵌套结构，可将每个嵌套对象转为[键, 值]形式的嵌套数组：

// 递归转换嵌套对象为嵌套键值对数组
const transformToNestedArray = (obj) => {
  return Object.entries(obj).map(([key, value]) => {
    // 若值仍为对象，递归处理
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      return [key, transformToNestedArray(value)];
    }
    return [key, value];
  });
};

// 处理外层数据，生成表格可用的嵌套数组
const tableData = Object.values(data.data.items.fields).map(item => transformToNestedArray(item));

// 映射渲染表格行
tableData.map((rowData, index) => (
  <Row
    key={index}
    data={rowData}
  />
));

2. 扁平化嵌套对象（展平所有层级） #

如果Row组件需要扁平化的键值对数据（例如将嵌套属性用.连接作为键），可使用如下展平方法：

// 递归展平嵌套对象，生成带完整键路径的键值对数组
const flattenNestedObject = (obj, parentKey = '') => {
  return Object.entries(obj).flatMap(([key, value]) => {
    const fullKey = parentKey ? `${parentKey}.${key}` : key;
    if (typeof value === 'object' && value !== null && !Array.isArray(value)) {
      return flattenNestedObject(value, fullKey);
    }
    return [{ key: fullKey, value: value }];
  });
};

// 处理外层数据
const tableData = Object.values(data.data.items.fields).map(item => flattenNestedObject(item));

// 映射渲染表格行
tableData.map((rowData, index) => (
  <Row
    key={index}
    data={rowData}
  />
));

说明 #

具体选择哪种转换方式，取决于你的Row组件期望接收的数据结构：

• 若需保留嵌套层级展示，选第一种嵌套数组方案；
• 若需将所有嵌套属性展平为同行单元格，选第二种扁平化方案。

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