React TypeScript列表key属性未显示且报唯一key警告问题

核心原因 #

你把key属性加在了组件内部的<li>标签上，但React的key是用来标识循环渲染的列表项组件/元素的，它需要直接传递给循环中的组件实例，而非组件内部的DOM元素。当你在组件内部的<li>上设置key，React不会将其识别为列表项的唯一标识；同时key是React的内部属性，不会被渲染到真实DOM中，所以你在浏览器元素面板里看不到它。

正确做法 #

假设你在父组件中循环渲染MyMenuItem，需要把key属性直接加在MyMenuItem组件上，而非组件内部的<li>标签：

父组件示例 #

const MenuList = () => {
  const menuItems = [
    { title: '首页', link: '/', cls: 'nav-link' },
    { title: '关于', link: '/about', cls: 'nav-link' }
  ];

  return (
    <ul className="list-group">
      {/* key 直接绑定到循环的 MyMenuItem 组件实例上 */}
      {menuItems.map(item => (
        <MyMenuItem 
          key={item.title} 
          title={item.title} 
          link={item.link} 
          cls={item.cls} 
        />
      ))}
    </ul>
  );
};

子组件修改（移除内部的key） #

const MyMenuItem: React.FC<MenuItem> = ({ title, link, cls }) => {
  return (
    <li className="list-group-item">
      <Link to={link} className={cls}>
        {title}
      </Link>
    </li>
  );
};

补充说明 #

• key仅服务于React的虚拟DOM diff算法，不会作为HTML属性输出到页面，所以浏览器开发者工具中看不到它是正常现象。
• 确保key的值在列表中唯一，如果title存在重复可能，建议使用更唯一的标识（比如ID）作为key。

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