Next.js（React&Ts）执行npm run build时出现react/jsx-key错误

问题根源 #

这个react/jsx-key错误明确指向：你在数组循环（比如map遍历）里渲染的<GridActionsCellItem>组件缺少唯一的key属性。React依赖key来区分循环生成的元素，确保DOM更新时的效率和正确性。

修复方案 #

1. 给组件添加唯一key #

直接在<GridActionsCellItem>上加上key属性，用循环项的唯一标识（比如你代码里的id）作为值：

<GridActionsCellItem
  key={id} // 核心：添加唯一key，id需是当前循环项的唯一值
  icon={<SaveIcon />}
  label="Save"
  sx={{
    color: "primary.main",
  }}
  onClick={() => handleSaveClick(id)} // 顺便修正onClick写法，避免提前执行函数
/>

2. 修正onClick的调用方式（重要） #

你当前的onClick={handleSaveClick(id)}会导致组件每次渲染时就执行handleSaveClick，而不是点击按钮时才触发。改成箭头函数包裹，或者用useCallback提前绑定参数优化性能：

// 推荐用useCallback优化（适合频繁渲染的场景）
const handleSave = useCallback((itemId: string | number) => {
  handleSaveClick(itemId);
}, [handleSaveClick]);

// 渲染时使用
<GridActionsCellItem
  key={id}
  icon={<SaveIcon />}
  label="Save"
  sx={{ color: "primary.main" }}
  onClick={() => handleSave(id)}
/>

关键提醒 #

• 不要用数组索引（index）作为key，除非你的数组永远不会排序、新增或删除元素——索引作为key会导致React无法正确追踪元素变化，引发渲染bug。
• 确保id是每个循环项的唯一标识（比如数据库主键），保证key的唯一性。

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