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 属性,写一个固定值也可以解决这个报错

相关推荐
索西引擎13 小时前
【React】key 属性:协调算法中的元素标识机制与最佳实践
前端·javascript·react.js
只会cv的前端攻城狮13 小时前
动态组件架构设计:从配置到事件驱动全链路解析
前端·vue.js
飞天狗13 小时前
Next.js 16 App Router 实战:服务端组件与流式渲染
前端·next.js
OpenTiny社区13 小时前
TinyEngine 2.11版本发布:AI 进一步融入画布,Vue 工程可一键转DSL
前端·vue.js·github
小雪_Snow13 小时前
JavaScript 中的三种常用事件
开发语言·前端·javascript
Hyyy14 小时前
Electron-Vite是什么,和Vite有什么区别
前端·面试
蓝胖子酱14 小时前
在 Electron 中用 electron-store 实现加密存储与自定义格式文件
前端·javascript·数据库
虚焦像素_14 小时前
海康 Web 插件版接入指南:用法与注意事项
前端
虚焦像素_14 小时前
海康 Web 无插件版接入指南:用法与注意事项
前端
To_OC15 小时前
LC 22 括号生成:刷完这道题,我终于搞懂回溯剪枝了
javascript·算法·leetcode