React列表元素key属性不生效：仍触发唯一key警告问题排查

你的核心错误是把key放错了位置：React要求key必须绑定在map循环返回的最外层组件/元素上，也就是父组件中items.map生成的<NavLink>标签，而不是子组件内部的<Nav.Link>。

为什么当前写法无效？ #

• React处理列表渲染时，只会识别循环层级（父组件的items.map）中直接返回元素的key，子组件内部的key对父组件的列表优化没有任何作用。
• key是React内部用于追踪列表项的标识，不会被渲染到HTML DOM中，所以你在开发者工具里看不到它是正常的。
• 控制台重复打印index是因为子组件可能因父组件状态变化重新渲染，但这和key的问题无关。

修改代码 #

1. 父组件：给循环的<NavLink>添加key

<Nav>
  {items.map((item, index) => (
    <NavLink 
      item={item} 
      index={index} 
      onClick={handleClick} 
      key={index} {/* 把key移到这里 */}
    />
  ))}
</Nav>

2. 子组件：移除<Nav.Link>上的key

export default function NavLink({ item, index, onClick }: NavLinkProps) {
  let classes = `me-${navSpacing} fs-${fontSize} text-decoration-underline`;
  classes += item.active ? " active" : "";
  const Icon = item.icon;
  console.log(index);
  return (
    <Nav.Link className={classes} onClick={() => onClick(item.key)}>
      <Icon className={`me-${iconSpacing}`} />
      {item.text}
      {item.page && typeof item.page === "string" && <ExternalIcon />}
    </Nav.Link>
  );
}

额外优化建议 #

如果你的item对象本身带有唯一标识（比如item.key或者item.id），建议用这个字段作为key，而不是index。因为当列表项的顺序发生变化时，index会跟着改变，可能导致React不必要的重新渲染，而使用固定的唯一标识能让列表渲染更高效稳定。

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