本文介绍如何将嵌套的时序分类数据（如按日期分组的类别金额）重构为「类别为行、日期为列」的规范 html 表格，通过 `reduce` 预处理 + `map` 渲染实现行列严格对齐。
在 React 中渲染多维结构数据时，直接嵌套 map 容易导致“每组数据独立渲染一行”，从而破坏横向对齐逻辑（如示例中每个日期块重复渲染全部类别）。要实现 「类别垂直排列、各日期金额水平展开」 的专业表格布局，关键在于先归一化数据结构，再按维度解耦渲染。
✅ 正确思路：从「按日期分组」转为「按类别聚合」
原始数据 category_evolution 是以日期为外层单位的数组，而目标表格要求以类别（category）为行基准，每个日期对应一列。因此需两步预处理：
- 扁平化所有条目：用 reduce 合并所有 data 数组；
- 按类别分组索引：构建 { "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 原始顺序一致，保障列序准确。
? 表格渲染：按类别遍历，按日期索引取值
<table className="table">
<thead>
<tr>
<th scope="col">Categoria</th>
{category_evolution.map(({ name }) => (
<th scope="col" key={name}>{name}</th>
))}
</tr>
</thead>
<tbody>
{Object.keys(categoryMap).map((category) => {
const entries = categoryMap[category];
return (
<tr key={category}>
<th scope="row">{category}</th>
{entries.map((entry, idx) => (
<td key={idx}>{entry.category_total_brl}</td>
))}
</tr>
);
})}
</tbody>
</table>✅ 优势：
- 列数完全由 category_evolution 长度决定，自动适配任意日期数量；
- 每行仅渲染一次，避免重复 <tr> 导致的错位；
- 使用 scope="row" 语义化增强可访问性。
⚠️ 注意事项与健壮性增强
-
空数据防护：若某类别在某日期缺失，entries[idx] 可能为 undefined，建议添加安全访问：
<td>{entries[idx]?.category_total_brl || '-'}</td> - 键唯一性：key={category} 在类别名唯一前提下安全；若存在同名不同义类别（如大小写混用），应改用 key={category + idx} 或哈希处理。
-
性能优化：对大数据量，建议用 useMemo 缓存 categoryMap：
const categoryMap = useMemo(() => { /* ... */ }, [category_evolution]);
通过结构重组而非强行嵌套渲染，你不仅能获得期望的表格形态，更能建立清晰的数据流逻辑——这是构建可维护 React 表格组件的核心实践。
