React使用map遍历列表出现唯一key prop警告，求排查解决

你的代码里存在几个明确问题，修复后就能消除警告：

1. 组件名与导入的NavLink冲突 #

你自定义的组件命名为NavLink，但同时从react-router-dom导入了同名组件，这会导致变量覆盖，React无法正确识别路由组件。把自定义组件名修改为不重复的名称，比如CustomNavLink：

import React from "react";
import { NavLink } from "react-router-dom";

// 重命名组件避免冲突
const CustomNavLink = () => {
  const LINKS = [
    {
      path: "/",
      name: "Home",
    },
    {
      path: "/search",
      name: "Search",
    },
    {
      path: "/",
      name: "Home",
    },
  ];
  // 其余代码不变
};

export default CustomNavLink;

2. map遍历未返回元素 #

你的map回调函数使用了大括号{}，但没有显式返回NavLink元素，导致React遍历后没有生成有效子元素，这是触发警告的核心原因之一。可以通过两种方式修复：

• 方式一：将大括号改为小括号，利用隐式返回：

{LINKS.map((link, index) => (
  <NavLink
    className={({ isActive }) =>
      "text-xs mr-8 " + (isActive ? " text-yellow" : "text-dark")
    }
    to={link.path}
    key={`${link.name}-${index}`}
  >
    {link.name}
  </NavLink>
))}

• 方式二：在大括号内添加return语句，显式返回元素：

{LINKS.map((link, index) => {
  return (
    <NavLink
      className={({ isActive }) =>
        "text-xs mr-8 " + (isActive ? " text-yellow" : "text-dark")
      }
      to={link.path}
      key={`${link.name}-${index}`}
    >
      {link.name}
    </NavLink>
  );
})}

3. 优化key的唯一性（可选但推荐） #

你当前使用${link.name}-${index}作为key，虽然当前列表里的key是唯一的，但如果后续列表有更多重复项，推荐给每个链接对象添加唯一id，让key更可靠：

const LINKS = [
  {
    id: 1,
    path: "/",
    name: "Home",
  },
  {
    id: 2,
    path: "/search",
    name: "Search",
  },
  {
    id: 3,
    path: "/",
    name: "Home",
  },
];
// 使用唯一id作为key
key={link.id}

完成上述修复后，警告即可消除。

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