React列表唯一key警告排查：已设key仍报错？

问题背景 #

基于Next.js的React应用，嵌套组件结构下，控制台持续触发警告：

Warning: Each child in a list should have a unique "key" prop.

已完成的排查动作：

• 确认父组件为单例且已设置key
• 列表项CommsPacket使用唯一的packet_index作为key，且已验证该值的唯一性
• 遍历全组件栈确认所有key均唯一，但警告未消失
• 尝试通过让React/Next.js在HTML中保留key属性来核查，未找到有效方法；简化代码后发现移除{rows}时警告消失，问题指向TelecommandService返回的整数key

可能被忽略的点及排查步骤 #

1. 整数key的重复或逻辑错误 #

即使你认为TelecommandService返回的整数key是唯一的，也可能存在生成逻辑漏洞导致重复。直接打印所有rows的key值来验证：

console.log('Rows Key集合:', [...new Set(rows.map(item => item.key))])
console.log('Rows总数量:', rows.length)

如果两个数值不一致，说明存在重复key，需要检查TelecommandService的数据返回逻辑。

另外，注意React的key作用域是当前列表的兄弟元素，不同列表使用相同整数key不会触发警告，但同一列表内绝对不能重复。

2. rows内部嵌套列表未设key #

警告可能并非来自rows本身，而是rows渲染的组件内部存在未设置key的子列表。比如TelecommandRow组件内部有map遍历但未加key，这时候警告的组件栈会指向子组件，但容易被误以为是rows的问题。

解决方式：

• 点击控制台警告的展开箭头，查看完整组件栈，定位触发警告的具体组件位置
• 检查rows渲染的组件内部是否有未处理的列表遍历，为每个子列表项添加唯一key

3. 开发环境缓存残留 #

Next.js开发服务器或浏览器缓存可能导致旧警告残留，尝试以下操作：

• 强制刷新浏览器页面（Ctrl+Shift+R）
• 重启Next.js开发服务器
• 删除项目根目录下的.next文件夹，重新执行npm run dev构建

4. 给HTML添加自定义属性核查key #

React不会将key渲染到HTML中，但可以通过自定义属性模拟，方便在浏览器元素面板中查看：

rows.map(item => (
  <TelecommandRow 
    key={item.id}
    data-key={item.id} // 自定义属性，可在Elements面板查看
    {...item}
  />
))

通过data-key可以直观确认每个元素的key值是否符合预期，是否存在重复。

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