如何在 React 中使用 map 构建行列对齐的动态数据表格

本文介绍如何将嵌套的时序分类数据（如按日期分组的类别金额）重构为「类别为行、日期为列」的规范 html 表格，通过 `reduce` 预处理 + `map` 渲染实现行列严格对齐。

在 React 中渲染多维结构数据时，直接嵌套 map 容易导致“每组数据独立渲染一行”，从而破坏横向对齐逻辑（如示例中每个日期块重复渲染全部类别）。要实现 「类别垂直排列、各日期金额水平展开」 的专业表格布局，关键在于先归一化数据结构，再按维度解耦渲染。

✅ 正确思路：从「按日期分组」转为「按类别聚合」

原始数据 category_evolution 是以日期为外层单位的数组，而目标表格要求以类别（category）为行基准，每个日期对应一列。因此需两步预处理：

1. 扁平化所有条目：用 reduce 合并所有 data 数组；
2. 按类别分组索引：构建 { "Criptomoedas": [...], "REITs": [...] } 形式的映射对象，确保同类数据可被顺序访问。

// 数据预处理：在组件内或 useMemo 中执行
const categoryMap = category_evolution
  .flatMap(({ data }) => data) // 替代 reduce([...acc, ...cur.data], [])，更简洁
  .reduce((acc, item) => {
    if (!acc[item.category]) acc[item.category] = [];
    acc[item.category].push(item);
    return acc;
  }, {});

? 提示：使用 flatMap 替代嵌套 reduce 可提升可读性；categoryMap 的值是按出现顺序排列的数组（如 ["01/02/2023", "01/01/2023"]），与 category_evolution 原始顺序一致，保障列序准确。

? 表格渲染：按类别遍历，按日期索引取值

      {category_evolution.map(({ name }) => (
        
      ))}
    
    {Object.keys(categoryMap).map((category) => {
      const entries = categoryMap[category];
      return (
        
          {entries.map((entry, idx) => (
            
          ))}
        
      );
    })}
  

  

    

      
Categoria
{name}
  
  

          
{category}
{entry.category_total_brl}

✅ 优势：

豆包大模型

字节跳动自主研发的一系列大型语言模型

下载

• 列数完全由 category_evolution 长度决定，自动适配任意日期数量；
• 每行仅渲染一次，避免重复 导致的错位；
• 使用 scope="row" 语义化增强可访问性。

⚠️ 注意事项与健壮性增强

• 空数据防护：若某类别在某日期缺失，entries[idx] 可能为 undefined，建议添加安全访问：

  {entries[idx]?.category_total_brl || '-'}

• 键唯一性：key={category} 在类别名唯一前提下安全；若存在同名不同义类别（如大小写混用），应改用 key={category + idx} 或哈希处理。
• 性能优化：对大数据量，建议用 useMemo 缓存 categoryMap：

  const categoryMap = useMemo(() => { /* ... */ }, [category_evolution]);

通过结构重组而非强行嵌套渲染，你不仅能获得期望的表格形态，更能建立清晰的数据流逻辑——这是构建可维护 React 表格组件的核心实践。