Next.js中ESLint检测map循环key缺失的配置及key使用疑问

一、配置ESLint触发map无key的错误提示 #

你需要在ESLint配置的rules中显式开启react/jsx-key规则并设为error级别，当前你的配置中该规则未被强制启用。修改后的配置如下：

{
  "extends": [
    "next/core-web-vitals",
    "airbnb",
    "airbnb-typescript",
    "prettier"
  ],
  "plugins": ["simple-import-sort"],
  "parserOptions": {
    "project": "./tsconfig.json"
  },
  "rules": {
    "react/react-in-jsx-scope": "off",
    "import/prefer-default-export": "off",
    "simple-import-sort/imports": "error",
    "simple-import-sort/exports": "error",
    "jsx-a11y/label-has-associated-control": [
      2,
      {
        "some": ["nesting", "id"]
      }
    ],
    // 新增：开启map渲染无key的错误提示
    "react/jsx-key": "error"
  }
}

保存配置后重启ESLint服务，当使用map循环渲染元素却未设置key时，就会触发错误提示。

二、索引作为key的使用场景与替代方案 #

1. 能否用索引当key？
   如果数组元素的顺序绝对固定，且永远不会有新增、删除、排序操作，可以使用索引作为key。但只要存在任何元素顺序变化、增删的可能，就不能用索引——因为React依赖key识别元素身份，索引变化会导致React错误地复用组件，引发状态错乱、不必要的重渲染等问题。

2. 无唯一ID时的处理方式

   • 生成唯一标识：在渲染前给每个元素添加一个生成的唯一ID，比如使用浏览器原生的crypto.randomUUID()，或者通过第三方工具生成（如uuid库）。
   • 组合唯一属性：如果元素的多个属性组合后能唯一标识它，可以用这些属性拼接成key，例如${item.title}-${item.createTime}（需确保组合后全局唯一）。
   • 手动添加静态ID：如果是静态数据，可以直接在数组元素中手动添加id字段，作为固定的key值。

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