在Vercel部署Next.js应用时遇'react/jsx-key'缺失key属性错误求助

排查与修复步骤 #

• 全局搜索代码里的map方法调用，定位所有通过数组循环渲染JSX的场景，比如这类结构：

  {items.map(item => (
    <ListItem content={item.content} />
  ))}
  

• 给循环生成的每个元素添加唯一且稳定的key属性：
  • 优先使用数据本身的唯一标识（比如数据对象里的id、slug字段），不要用数组索引（index）作为key（除非列表永远不会排序、增删）。示例：

    {items.map(item => (
      <ListItem 
        key={item.id} // 用数据的唯一id作为key
        content={item.content} 
      />
    ))}
    

针对你的仓库的重点检查位置 #

打开代码仓库，优先查看以下文件：

• components/Experience.js、components/Education.js这类展示履历、教育经历的列表组件，这类组件通常会用循环渲染，大概率是这里遗漏了key。
• pages/index.js或其他页面文件中是否存在数组渲染JSX的逻辑。

验证修复 #

添加key后，本地执行npm run lint（或yarn lint），如果react/jsx-key相关警告消失，说明问题已修复，重新部署到Vercel即可。

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