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

相关推荐
YHHLAI9 分钟前
[特殊字符] Agent 智能体开发实战 · 第一课:Tool Use —— 让大模型自动干活
前端·人工智能
nuIl16 分钟前
我把 5 个编码 Agent 塞进了一个 npm 包
前端·agent·claude
L-影20 分钟前
FastAPI 静态文件:Web 页面的“固定展柜”与“加速引擎”
前端·fastapi
陪我去看海23 分钟前
受够了 AI 写完代码留下一堆端口?我做了一个端口管理App!
前端·macos·vibecoding
Xuepoo23 分钟前
我抛弃了 DOM,但保留了无障碍访问
前端
李明卫杭州25 分钟前
Vue2 vs Vue3 的 h 函数:渲染函数完整迁移指南
前端
月光刺眼30 分钟前
用LangChain 打造第一个 Agent:LLM 大脑与 Tool 手脚的完整闭环
javascript·人工智能·全栈
星栈30 分钟前
LiveView 的认证系统:从登录到权限,我一开始以为有 `current_user` 就算完事了
前端·前端框架·elixir
在因斯坦31 分钟前
摸摸鱼之前端自己研究 Jenkins 自动化部署
前端
wear工程师33 分钟前
setState 到底是不是异步的?这题从 React 16 问到 18,标准答案早就变了
react.js·面试