React中Object.entries+map生成表头出现多余条目问题及替代方案

问题根源 #

你遇到的多余条目问题，核心原因是将value作为<th>的key属性。React对列表元素的key有严格要求：必须是当前列表内唯一的值。如果data[0]中有不同字段对应相同的value（比如CTTC项目里可能存在多个字段值为空字符串或重复数值），重复的key会干扰React的DOM diff算法，导致渲染出多余的表格表头条目。

替换代码 #

把原代码段替换为：

{Object.entries(data[0]).map(([key, value]) => (
  <th className={`${tdClasses} text-left`} key={key}>
    {key}
  </th>
))}

改动说明 #

• 改用**字段名key**作为<th>的key属性：对象的每个字段名（key）在data[0]中是唯一的，完全符合React对key唯一性的要求，能让React正确识别每个表头元素，避免渲染异常。
• 保留原有表头内容的逻辑（显示字段名key），不影响原本的业务展示。

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