react antd常见报错Each child in a list should have a unique “key“ prop

常见的一个报错内容:原因可能真的很奇怪,但是那就那么三四种情况,在此记录一下这个问题

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

Check the render method of `Panel`. It was passed a child from LogDialog. See https://reactjs.org/link/warning-keys for more information.

常见的报错情况总结

1.Map遍历渲染数据

这是最常见的一种,也是最容易发现和解决的一种情况,相信做react开发的同学都知道这个问题

解决方式:给被遍历的组件加上 key 属性

2.Table表格数据渲染

这个也是常见的一种,在antd中的table渲染的时候,要求每一行数据有一个单独的key,或者给table设置rowKey属性就可以解决

第一种解决方案:给table设置rowKey属性

第二种解决方案:给数据加上key属性

3.Select选择器中的Option

这个也是比较常见的一种吧,类似map渲染,一样要加上key

解决办法:在map里面的子组件加上key属性

4.Modal 对话框组件

这个应该是最难发现的一个的情况,解决办法也是神奇,想不通为啥这个会报错,其他的遍历我都能理解,但是这个.....

解决办法:给页脚组件设置 key 属性,写一个固定值也可以解决这个报错

相关推荐
飘尘12 小时前
前端转型全栈(Java后端)的快速上手指引
前端·后端·全栈
一颗烂土豆12 小时前
Meshopt 压缩深度解析,为什么它比 Draco 更快
前端·javascript·webgl
YFF菲菲兔13 小时前
调度系统和调和系统的桥梁
react.js
浏览器工程师13 小时前
AI Agent 接浏览器任务,先别让它一路点到底
前端·后端
雨季mo浅忆13 小时前
VSCode自动格式化三要素
前端
爱勇宝14 小时前
深扒 Anthropic 1680 位工程师简历:应届生几乎没机会,AI 公司最缺的不是博士
前端·后端·程序员
kyriewen15 小时前
同事每天催我 Code Review,我写了个脚本让 AI 替我 review PR——现在他反过来催 AI 了
前端·javascript·ai编程
user205855615181317 小时前
Windows 项目安装时报 `node-sass` 错误,如何快速处理
前端
LiaCode17 小时前
Redis 在生产项目的使用
前端·后端
LiaCode17 小时前
一天学完 redis 的爽翻版核心知识总结
前端·后端