React表格开发：校验行数据与列年月匹配，不匹配则设为0

核心思路 #

要解决单元格错位，关键是让每个部门的行数据长度和年月列数完全对应——不管该部门有没有对应年月的数据，都要为每个年月生成一个值（无数据则填0）。

具体实现步骤 #

假设你的数据结构如下：

• resultData: 后端返回的数组，每一项包含department（部门名）、month（年月，如'2024-01'）、value（对应数值）
• monthToCheck: 需要展示的年月列表，如['2024-01', '2024-02', '2024-03']

1. 提取唯一部门列表
   先从resultData中取出所有需要展示的部门，避免遗漏：

const departments = [...new Set(resultData.map(item => item.department))];

2. 格式化数据：补全缺失的年月值
   遍历每个部门，为每个年月匹配对应数据，无匹配则设为0：

const formattedData = departments.map(department => {
  return {
    department,
    // 为每个年月生成对应值，保证数组长度和monthToCheck一致
    monthlyValues: monthToCheck.map(targetMonth => {
      // 必须同时匹配部门和年月两个条件
      const matchedItem = resultData.find(
        item => item.department === department && item.month === targetMonth
      );
      return matchedItem ? matchedItem.value : 0;
    })
  };
});

3. 渲染表格
   用格式化后的数据渲染表格，确保每行的单元格数量和表头列数完全对应：

<table border="1">
  <thead>
    <tr>
      <th>部门</th>
      {monthToCheck.map(month => (
        <th key={month}>{month}</th>
      ))}
    </tr>
  </thead>
  <tbody>
    {formattedData.map(row => (
      <tr key={row.department}>
        <td>{row.department}</td>
        {row.monthlyValues.map((value, idx) => (
          <td key={monthToCheck[idx]}>{value}</td>
        ))}
      </tr>
    ))}
  </tbody>
</table>

关键注意点 #

• 之前用find失败大概率是只匹配了年月或部门其中一个条件，必须同时校验两个字段才能准确找到对应数据
• 格式化后的monthlyValues数组长度和monthToCheck完全一致，从根源上避免单元格错位

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