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

相关推荐
Htr_2 分钟前
Anysite.io 使用指南:把整个 Web 变成 AI 智能体的数据库
前端·数据库·人工智能
知兀5 分钟前
【前端】受控和非受控组件
前端·javascript·react
玉宇夕落6 分钟前
别再把 SSE 当普通流式了!从 EventSource 到 LangChain,一次讲透实时推送与流式输出
前端
CappuccinoRose8 分钟前
专项事件体系
前端·学习·网络状态·表单事件·剪贴板事件·拖放事件·页面可见性
李剑一13 分钟前
各位产品经理求你们优化一下吧,暗黑模式最大的BUG!文中附解决方案
前端
晴天1616 分钟前
JavaScript 与 Java 垃圾回收机制对比
java·开发语言·javascript
huali35 分钟前
vue-split-screen:让 Vue Router 的导航轨迹变成两个页面
前端·javascript·vue.js
bug总结44 分钟前
uniapp总结
开发语言·前端·javascript
云运维笔记1 小时前
华为VRP系统文件管理全攻略
前端·华为
走到天涯海角1 小时前
pinia和Vuex的区别以及使用pinia
开发语言·前端·javascript