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

相关推荐
Shirley~~13 小时前
Vue-skills的中文文档
前端·人工智能
毎天要喝八杯水13 小时前
搭建vue前端后端环境
前端·javascript·vue.js
计算机程序设计小李同学13 小时前
幼儿园信息管理系统的设计与实现
前端·bootstrap·html·毕业设计
雨季66613 小时前
Flutter 三端应用实战:OpenHarmony “极简手势轨迹球”——指尖与屏幕的诗意对话
开发语言·javascript·flutter
摘星编程14 小时前
OpenHarmony + RN:Stack堆栈导航转场
react native·react.js·harmonyos
雨季66614 小时前
Flutter 三端应用实战:OpenHarmony “专注时光盒”——在碎片洪流中守护心流的数字容器
开发语言·前端·安全·flutter·交互
tao35566714 小时前
【用AI学前端】HTML-02-HTML 常用标签(基础)
前端·html
2601_9495328414 小时前
Psello HTML Template: A Developer‘s Deep-Dive Review and Guide - Download Free
前端·windows·html·seo·wordpress·gpl
CappuccinoRose14 小时前
CSS前端布局总指南
前端·css·学习·布局·flex布局·grid布局·float布局
摘星编程14 小时前
OpenHarmony环境下React Native:Tooltip自动定位
javascript·react native·react.js