React中嵌套数组转扁平数组并重复父级值渲染表格的方案咨询

针对你需要把嵌套结构的库存数据渲染成父级值重复显示的表格需求，两种方案各有适用场景，具体分析和实现方法如下：

方案一：将原数组转为扁平结构 #

优势 #

数据处理和渲染逻辑完全分离，渲染层只需要做简单的数组遍历，代码更简洁易维护，尤其适合Vue、React这类模板类框架的表格渲染场景，避免嵌套循环带来的复杂度。

具体实现方法 #

通过遍历嵌套数组，将每个子项与对应的父级字段合并成独立的扁平对象。举个JavaScript示例：

假设原嵌套数据结构如下：

const inventoryData = [
  {
    category: "电子产品",
    items: [
      { name: "智能手机", stock: 45 },
      { name: "笔记本电脑", stock: 18 }
    ]
  },
  {
    category: "家居用品",
    items: [
      { name: "纯棉毛巾", stock: 92 },
      { name: "电动牙刷", stock: 67 }
    ]
  }
];

编写扁平化处理函数：

function flattenInventory(data) {
  const flatList = [];
  // 遍历每个父级分类
  data.forEach(categoryItem => {
    // 遍历分类下的每个子物品，合并父级字段
    categoryItem.items.forEach(goods => {
      flatList.push({
        category: categoryItem.category,
        ...goods
      });
    });
  });
  return flatList;
}

// 得到扁平结构的数据
const flatInventory = flattenInventory(inventoryData);

处理后的flatInventory每条数据都包含父级分类信息，渲染表格时直接遍历该数组即可，无需嵌套逻辑。

方案二：直接基于嵌套数组渲染表格 #

优势 #

无需修改原数据结构，适合原嵌套数组还要用于其他业务逻辑（比如树形分类展示、分类统计）的场景，避免重复维护多份数据。

具体实现方法 #

在渲染层通过嵌套循环完成表格行的生成，以下是不同框架的示例：

React 示例

<table border="1">
  <thead>
    <tr>
      <th>物品分类</th>
      <th>物品名称</th>
      <th>库存数量</th>
    </tr>
  </thead>
  <tbody>
    {inventoryData.map(category => (
      category.items.map((goods, idx) => (
        <tr key={`${category.category}-${idx}`}>
          <td>{category.category}</td>
          <td>{goods.name}</td>
          <td>{goods.stock}</td>
        </tr>
      ))
    ))}
  </tbody>
</table>

Vue 示例

<table border="1">
  <thead>
    <tr>
      <th>物品分类</th>
      <th>物品名称</th>
      <th>库存数量</th>
    </tr>
  </thead>
  <tbody>
    <template v-for="category in inventoryData" :key="category.category">
      <tr v-for="(goods, idx) in category.items" :key="idx">
        <td>{{ category.category }}</td>
        <td>{{ goods.name }}</td>
        <td>{{ goods.stock }}</td>
      </tr>
    </template>
  </tbody>
</table>

最优选择建议 #

• 如果仅需表格渲染，或者希望渲染逻辑尽可能简单，优先选择扁平化数组方案，渲染代码更直观，降低出错概率。
• 如果原嵌套数据还有其他业务用途，不想额外维护扁平数据，就选择直接嵌套渲染方案。

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