本文详解如何基于对象数组动态生成 html 表格，并为每行添加年同比（yoy）变化率列——通过访问相邻年份数据实现差值与百分比计算，支持正负颜色区分与首行空缺处理。
本文详解如何基于对象数组动态生成 html 表格，并为每行添加年同比（yoy）变化率列——通过访问相邻年份数据实现差值与百分比计算，支持正负颜色区分与首行空缺处理。
在 React（或 JSX 环境）中渲染带 YoY（Year-over-Year）变化率的表格时，关键在于：当前行需引用“下一年”（即时间上更早一年）的数据进行对比。注意题中数据按年份降序排列（2023 → 2019），因此对 2023 行而言，“上年”是 2022 行（即 index + 1），而非 index - 1——这也是原代码 parsedAdmin2ReportData[index-1] 失败的根本原因：它试图取前一行（年份更大），而数据中前一行实际是未来年份。
正确做法是在 .map() 的回调中接收第三个参数 arr（即原数组本身），利用 index + 1 安全访问下一项，并增加边界判断。以下是优化后的完整实现：
<tbody>
{parsedAdmin2ReportData.map((row, index, arr) => {
let yoyValue = null; // 存储计算出的 YoY 小数值（如 -0.123）
let yoyDisplay = ''; // 最终显示的字符串（含%和颜色）
// 只有存在“下一年”（即非最后一行）才计算 YoY
if (index < arr.length - 1) {
const nextRow = arr[index + 1]; // 例如：当前是2023(index=0)，nextRow是2022(index=1)
const currentTotal = row.New + row.Updates;
const nextTotal = nextRow.New + nextRow.Updates;
// YoY 变化率 = (本年总量 - 上年总量) / 上年总量
// 注意：题中公式描述有歧义，标准 YoY 应为 (当前 - 上年) / 上年；此处严格按需求实现
const changeRate = (currentTotal - nextTotal) / nextTotal;
yoyValue = changeRate;
// 格式化为百分比字符串，保留两位小数
yoyDisplay = `${(changeRate * 100).toFixed(2)}%`;
}
// 根据正负设置内联样式（生产环境建议用 CSS 类替代）
const yoyStyle = yoyValue !== null
? { color: yoyValue >= 0 ? 'green' : 'red', fontWeight: '500' }
: {};
return (
<tr key={row.Years}> {/* 推荐用唯一字段如 Years 作 key，避免 index 变动风险 */}
<td>{row.Years}</td>
<td>{row.New}</td>
<td>{row.Updates}</td>
<td>{row.New + row.Updates}</td>
<td>{row.New}</td>
<td style={yoyStyle}>{yoyDisplay || '-'}</td>
</tr>
);
})}
</tbody>✅ 关键要点说明：
- 索引逻辑修正：因数组按年份降序排列，index + 1 对应“上年”，index - 1 反而指向“下年”，故必须用 arr[index + 1]；
- 边界防护：if (index < arr.length - 1) 确保不越界访问（2019 行无上年，自动留空）；
- key 最佳实践：将 key={index} 改为 key={row.Years}，避免列表重排时 React Diff 异常；
- 样式处理：使用内联 style 动态控制文字颜色，亦可抽离为 CSS 类（如 class={yoyValue >= 0 ? 'positive' : 'negative'}）；
- 空值容错：对无 YoY 数据的行（如 2019）显示 '-'，提升表格可读性。
? 进阶提示：若需支持升序排列（2019 → 2023），只需将条件改为 if (index > 0) 并取 arr[index - 1]，核心逻辑不变。统一的数据预处理（如按年份排序）可进一步提升代码健壮性。
立即学习“Java免费学习笔记（深入）”；
