React中如何为循环渲染的<th>标签设置唯一key属性？

你可以把星期数据整理成数组，通过map遍历生成元素，这样就能轻松给每个分配唯一的key：

renderDateTable = () => {
  // 定义星期数组，每个元素天然唯一
  const weekDays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
  
  return weekDays.map(day => (
    // 用星期字符串作为key，稳定且唯一
    <th key={day} className="text-center">{day}</th>
  ));
}

另外要注意：你当前在employee.map里调用renderDateTable()，会导致每个员工对应渲染一遍表头，这不符合表格的正常结构逻辑。正确的做法是把表头行单独放在员工数据行的外面，比如：

// 单独渲染表头行
<tr>{this.renderDateTable()}</tr>
// 渲染员工数据行
{employee.map((val, index) => (
  <tr key={val.id || index}>
    {/* 这里渲染每个员工对应的日期列内容 */}
    <td>{/* 员工周日数据 */}</td>
    <td>{/* 员工周一数据 */}</td>
    {/* ... 其他日期列 */}
  </tr>
))}

如果一定要保留原有手动写的写法（不推荐），也可以直接给每个手动指定唯一key：

renderDateTable = () => {
  return (
    <>
      <th key="sun" className="text-center">Sun </th>
      <th key="mon" className="text-center" >Mon </th>
      <th key="tue" className="text-center" >Tue </th>
      <th key="wed" className="text-center" >Wed </th>
      <th key="thu" className="text-center" >Thu </th>
      <th key="fri" className="text-center" >Fri </th>
      <th key="sat" className="text-center" >Sat </th>
    </>
  ) 
}

这种手动赋值的方式灵活性较差，后续修改星期名称或顺序时需要同步调整key，不如数组map的方式简洁可靠。

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