NextJS/TailwindCSS中遍历对象时，unique key属性应放在哪里？

问题核心 #

你现在的错误在于：

• 把key加在了map循环返回片段的内部子元素上，而React要求key必须放在每个循环返回的最顶层元素上。
• 你用了无key的空片段<>...</>包裹内容，这种简写片段不支持key属性，导致React无法识别正确的唯一标识，警告持续出现。
• 给内部的Link、a标签加key完全多余，属于无效操作。

修正方案 #

1. 移除无用的空片段：你当前用<>...</>包裹的内容本身只有一个顶层元素（td），完全不需要片段包裹，直接返回td即可。
2. 只在map返回的最顶层元素加key：每个map循环的返回值最外层元素只需要一个唯一key，优先用数据里的project.id（天然唯一），别用index（除非数据没有唯一标识）。
3. 删除内部子元素的多余key：把Link、a标签上的key全部删掉，这些地方不需要key。

修正后的代码 #

导航链接部分的map循环

<tr id="webDev-links-row" className="flex flex-wrap justify-evenly">
  {projects.map((project)=>{
    return (
      <td className="shrink-0 p-2 button" key={project.id}>
        <Link href={`#${project.id}`}>
          <a className="h-full" id={`${project.id}-link`}>
            {project.name}
          </a>
        </Link>
      </td>
    )
  })}
</tr>

项目卡片部分的map循环

<tr id="webDev-items-row" className="flex flex-col pt-4 b">
  {projects.map((project)=>{
    return (
      <td id={`${project.id}`} className="w-11/12 mx-auto my-1 b" key={project.id}>
        <div id={`${project.id}-grid`} className="grid grid-cols-[30%_auto] grid-rows-[70%_18%_auto] h-[250px] b">
          <div id={`${project.id}-screenshot`} className="col-span-1 row-span-2 m-auto b">insert image</div>
          <div id={`${project.id}-info`} className="p-4 pt-1  b">
            <h1 id={`${project.id}-title`} className="text-center py-1 font-bold ">{project.name}</h1>
            <p id={`${project.id}-description`} className="text-sm leading-4">{project.description}</p>
          </div>
          <div id={`${project.id}-techStack`} className="text-xs flex items-center justify-center p-2 text-center b">
            {project.techStack}
          </div>
          <div id={`${project.id}-external-links-group`} className="col-span-2 row-start-3 flex items-center justify-evenly  b">
            <Link href={project.url} className="">
              <a id={`${project.id}-url`} className="font-bold button px-4" target="_blank">live site</a>
            </Link>
            <div className="spacer"> </div>
            <Link href={project.git}>
              <a id={`${project.id}-github`} className="font-bold" target="_blank">github</a>
            </Link>
          </div>
        </div>
      </td>
    )
  })}
</tr>

关键提醒 #

• 永远用数据里的唯一标识字段（比如你的project.id）作为key，别用循环的index——当列表元素顺序变化、新增/删除时，index会导致React重新渲染错误的元素，影响性能和正确性。
• 每个map循环的返回值，最顶层只能有一个带key的元素，内部子元素不需要加key。

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