ReactJS+Antd表格数据显示异常问题求助

基于ReactJS + Ant Design开发的表格列显示正常，但行数据匹配错位。问题核心是通过for循环索引获取variants.values中的行数据，当不同variants的values数组长度不一致时，索引对应关系错乱，导致行数据与列无法正确匹配。

错误代码示例（模拟常见错误写法） #

// 错误的行数据生成逻辑：依赖第一个variant的values长度，用索引强行匹配
const buildTableData = (variants) => {
  const rows = [];
  const rowCount = variants[0]?.values.length || 0;
  for (let i = 0; i < rowCount; i++) {
    const row = {};
    variants.forEach((variant) => {
      // 直接用索引i取值，长度不足时会取undefined或越界
      row[variant.key] = variant.values[i];
    });
    rows.push(row);
  }
  return rows;
};

// Antd Table组件使用
<Table columns={columns} dataSource={buildTableData(variants)} />

解决方案 #

方案1：基于唯一标识匹配（推荐，适配复杂场景） #

核心思路：放弃索引依赖，为每个行数据绑定唯一标识（如rowId），通过标识精准匹配对应列的数据。

// 第一步：收集所有行的唯一标识
const getAllRowIds = (variants) => {
  const rowIds = new Set();
  variants.forEach((variant) => {
    variant.values.forEach((item) => {
      // 假设每个value项自带rowId，无标识则可根据业务生成（如拼接字段/自增ID）
      rowIds.add(item.rowId);
    });
  });
  return Array.from(rowIds);
};

// 第二步：生成正确的行数据
const buildCorrectTableData = (variants) => {
  const rowIds = getAllRowIds(variants);
  return rowIds.map((rowId) => {
    const row = { key: rowId }; // Antd Table要求每个项有唯一key
    variants.forEach((variant) => {
      // 通过rowId匹配当前列对应的数据，无匹配项显示默认值
      const targetValue = variant.values.find((item) => item.rowId === rowId);
      row[variant.key] = targetValue?.value || '-';
    });
    return row;
  });
};

// 第三步：Table组件使用
<Table columns={columns} dataSource={buildCorrectTableData(variants)} />

方案2：补全空值后按索引匹配（仅适用于行顺序严格一致的简单场景） #

如果业务不允许添加唯一标识，可先补全所有values数组到最大长度，再按索引匹配：

const buildTableDataWithFill = (variants) => {
  // 找到所有values数组的最大长度
  const maxRowCount = Math.max(...variants.map(v => v.values.length));
  // 补全长度不足的数组
  const filledVariants = variants.map(v => ({
    ...v,
    values: [...v.values, ...Array(maxRowCount - v.values.length).fill('-')]
  }));
  // 按索引生成行数据
  const rows = [];
  for (let i = 0; i < maxRowCount; i++) {
    const row = { key: i };
    filledVariants.forEach(v => row[v.key] = v.values[i]);
    rows.push(row);
  }
  return rows;
};

注意事项 #

• 优先选用唯一标识匹配方案，适配行数据动态增减、顺序变化等复杂场景，稳定性更强。
• 补空值方案仅适用于行数据严格按顺序排列，缺失行仅在末尾的场景。
• Antd Table的dataSource每个项必须包含唯一key字段，避免渲染警告。

内容的提问来源于stack exchange，提问作者Nguyễn Văn Huy