React组件重渲染时表格行数递增的原因是什么？

核心问题 #

1. HTML表格结构不合法：你在<tr>标签内部直接嵌套了另一个<tr>，违反了HTML表格的层级规则（正确层级为table > tbody > tr > td），浏览器自动修正错误结构时，会导致重渲染出现重复行。
2. Key值使用不当：用循环index作为元素key，数据更新时React无法正确识别元素唯一性，易引发不必要的重渲染和DOM异常。
3. 渲染逻辑混乱：嵌套的map循环导致表格行生成逻辑错位，进一步加剧DOM结构错误。

修正后的代码 #

import React from 'react';

interface Props {
  labels: string[];
  data: Array<{
    rowLabel: string;
    key: string;
    value: string;
  }>;
}

const sampleData = [
  {
    rowLabel: 'Fever',
    key: 'temperature',
    value: '38.5°C',
  },
  {
    rowLabel: 'Colds',
    key: 'symptom',
    value: 'Runny nose',
  },
];

const Display: React.FC<Props> = ({ labels, data }) => {
  const filteredData = data.filter(item => labels.includes(item.rowLabel));

  return (
    <table
      style={{
        direction: 'ltr',
        width: '100%',
        borderCollapse: 'collapse',
      }}
    >
      <tbody>
        {filteredData.map(item => (
          <tr key={`${item.rowLabel}-${item.key}`} style={{ border: '2px solid #e8e8e9' }}>
            <td style={{ border: '2px solid #e8e8e9', textAlign: 'center', width: '20%' }}>
              {item.rowLabel}
            </td>
            <td style={{ border: '2px solid #e8e8e9', width: '40%', paddingLeft: '5px' }}>
              {item.key}
            </td>
            <td style={{ border: '2px solid #e8e8e9', width: '40%', textAlign: 'right', paddingRight: '5px' }}>
              {item.value}
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Display;

关键修改说明 #

• 修复表格结构：用tbody包裹所有表格行，确保<tr>直接作为tbody子元素，<td>作为<tr>子元素，符合HTML规范。
• 替换唯一Key值：用${item.rowLabel}-${item.key}作为行标识，保证每个表格行的key唯一，避免React重渲染时复用错误组件。
• 优化数据逻辑：先过滤出与labels匹配的数据再渲染，避免嵌套map导致的结构混乱，同时提升性能。
• 类型优化：将any替换为具体类型定义，增强代码可维护性与类型安全。
• 样式调整：添加borderCollapse: 'collapse'合并表格边框，视觉更整洁。

调用方式保持不变 #

<Display
 labels={['Fever','Colds']}
 data={sampleData}
/>

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