must set key for ＜rc-animate＞ children错误的解决办法（antd upload组件报错记录）

最新推荐文章于 2022-10-12 18:05:03 发布
最新推荐文章于 2022-10-12 18:05:03 发布
阅读量1.5k 收藏
点赞数 1
分类专栏： react + ant-design 文章标签： ant upload
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44197210/article/details/118085363
版权

问题描述
今天在使用antd upload组件渲染已上传文件的时候报错了；
在这里插入图片描述
问题原因
排查了一下，我是直接从后台拿的数据，直接传给了upload组件，算是人为控制的数据，即传给组件的fileList的数据是人为控制的，并没有uid。antd文档写了uid是唯一标识符，我没有uid导致了此错误。
在这里插入图片描述

解决办法
我从后台拿的数据是有id这个字段的，且此字段唯一，可以当作uid使用。将id的值赋给uid就解决了这个问题；
在这里插入图片描述

想为雷总打工的小张
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Error: must set key for ＜rc-animate＞ children
bittingCat的博客
09-16 526
最近在做react项目的时候，在一个页面回显赋值，老是报这个错，我查了一下，页面都没有用到过这个东西，而且循环的项也给了key，逐步排除后，发现是回显图片上传组件那块才会这样出问题，后来网上搜了一下，发现是。
Error: must set key for rc-animate children
boysky0015的博客
08-13 7848
Uncaught Error: must set key for <rc-animate> children at Animate.js:202 at Array.map (<anonymous>) at Animate.render (Animate.js:197) at finishClassComponent (react-dom.de...
Antd Select组件结合使用出现must set key for ＜rc-animate＞ children问题
Haines
04-12 1090
一、以下情况可能导致错误发生 出现这个问题的首要条件是因为Select的mode 设置成multipleortags 1. Select的defaultValue使用了空字符串 例如: const emptyValue = '' const emptyValueArr = ['1', ''] <Select mode="tags" defaultValue= emptyValue || emptyValueArr > { [1, 2].m..
Error: must set key for <rc-animate> children
weixin_34311757的博客
12-12 240
为什么80%的码农都做不了架构师？>>> ...
react antd Warning: must set key for <rc-animate> children
weixin_30802273的博客
08-20 233
实例中，location 有可能是一个‘’，''.split() 将输出[""]，是个含有空字符串的数组，而[]是个什么都没有的数组，两者不同。code:change initialValue from :initialValue: location.split(',') || []to:initialValue: location === '' ? [] : location.sp...
vue-animate-onscroll：一个简单的组件，可在元素滚动到视图中时对其进行动画处理
02-03
安装npm install vue-animate-onscroll# oryarn add vue-animate-onscroll建立导入到您的Vue应用程序import Vue from 'vue'import VueAnimateOnScroll from 'vue-animate-onscroll'Vue . use ( VueAnimateOnScroll )...
react-animate-on-scroll:当用户滚动时，React组件提供动画
04-30
npm install react-animate-on-scroll --save 如果要使用animate.css中的动画，请确保在项目中以某种方式包含animate.css。这可以通过多种方式完成，例如： npm install --save animate.css 然后导入您的项目： ...
vue利用 vue-animate-number插件动态展示数字（从0动态滚动到指定数字）.docx
09-02
在上面的示例中，我们使用 `mode` 属性将动画设置为手动模式，并使用 `ref` 属性将 `<animate-number>` 组件赋值给 `myNum`。然后，我们使用一个按钮来触发动画的播放。 结论 ---- 本文介绍了如何使用 vue-animate...
react-adobe-animate:帮助嵌入来自Adobe Animate的动画的组件
05-23
Adobe Animate React组件 用于嵌入Adobe Animate中的动画的组件。 安装 npm install -S react-adobe-animate 例子 依存关系 React CreateJS –将其添加到您的页面[removed][removed] 您的动画–使用[removed]标记...
pixi-animate:PixiJS运行时库，用于来自Adobe Animate CC的内容
05-03
// Note: Must also include the pixi.js typings globally! import animate = require ( 'pixi-animate' ) ; let myMC : animate . MovieClip = new animate . MovieClip ( ) ; 或者使用三斜杠引用来使用PIXI....
must set key for ＜rc-animate＞ children问题
喜欢做一些demo，和分享遇到的 BUG
07-24 4136
在使用React开发的时候，其中数据回显的时候用到了upload组件回显图片，遇到这个问题 发现是图片数组长度虽然不为0，但是里面的参数没有值，所以组件回显遍历的时候不成功！提示这种错误 修改方法 判断没有传图片的时候 我觉得出现这种情况的原因是新增的时候没有判断图片数组为空的时候不传给后端，所以有个默认为空的时候 ...
Uncaught Error: must set key for ＜rc-animate＞ children on modal(React-select)解决方式
WebView
04-26 558
1、 2、问题出在于下拉选择的默认值出现了undefined 简单处理一下 const newDefaultValue = defaultValue.filter(e => e !== undefined);
Uncaught Error: must set key for <rc-animate> children 解决办法
weixin_30897233的博客
11-07 1250
描述： 　　今天在页面跳转的时候遇到了一个Uncaught Error: must set key for <rc-animate> children的问题，主要是因为mode属性造成，问题截图如下： 解决办法： 　　设置select默认值initialValue不为空。 转载于:https://www.cnblogs.com/baiyuer666/p/7799994.htm...
Antd Select组件结合使用出现must set key for <rc-animate> children问题
weixin_30696427的博客
11-22 766
一、以下情况可能导致错误发生 出现这个问题的首要条件是因为Select的mode 设置成multiple or tags 1. Select的defaultValue使用了空字符串 例如: const emptyValue = '' const emptyValueArr = ['1', ''] <Select mode="tags" defau...
antdesign 使用upload报错问题总结
impossible1994727的博客
04-26 2436
我是在form组件中使用的upload，因为用form.setFieldsValue没能给upload赋值，所以选择使用upload的defaultFileList。 本地版本一直有个警告： Warning: [antd: Upload] `value` is not a valid prop, do you mean `fileList`? 线上版本一直报错某个map 和must set key for <rc-animate> children； 总结原因是使用defaultFi.
antd框架Transfer穿梭框的错误
weixin_33726318的博客
01-09 3001
2019独角兽企业重金招聘Python工程师标准>>> ...
【React】Antd Upload组件的常用属性以及在表单Form中的使用
qq_53512708的博客
10-12 5385
Ant Design Upload上传组件常见属性介绍：beforeUpload、defaultFileList、fileList、action、onChange等， 上传文件后点击文件就自动下载对应文件 在Form表单中如何做到数据回显，即配置初始化文件列表数据 不同后缀名的文件显示对应的图标，超过3行显示滚动条，空间上显示3.5行
antd中tooltip换行_antd源码解读（二）Tooltip组件解析
weixin_39524959的博客
12-20 491
引言antd的Tooltip组件在react-componment/trigger的基础上进行封装，而组件Popover和Popconfirm是使用Tooltip组件的进行pop，在react-componment中，使用到组件tc-trigger的还有menu、select、dropdown、time-picker、calendar等，本文主要对tc-trigger源码进行解读。结构项目结构如下...
<script src="js/jquery.min.js"></script> <script src="js/bootstrap.min.js"></script> <script src="js/SmoothScroll.min.js"></script> <!-- js for gallery --> <script src="js/darkbox.js"></script> <!-- /js for gallery --> <!-- js for back to top --> <script src="js/main.js"></script> <!-- /js for back to top --> <!-- js for nav-smooth scroll --> <script> $(document).ready(function(){ // Add smooth scrolling to all links in navbar + footer link $(".navbar a, footer a[href='#myPage']").on('click', function(event) { // Store hash var hash = this.hash; // Using jQuery's animate() method to add smooth page scroll // The optional number (900) specifies the number of milliseconds it takes to scroll to the specified area
最新发布
06-07
这是一个包含多个JavaScript文件的HTML文件中的一部分代码。这些JavaScript文件用于添加一些功能和效果，例如： 1. jQuery.min.js - 用于添加交互功能和动态效果的JavaScript库。 2. Bootstrap.min.js - 用于创建响应式网站和网页元素的JavaScript框架。 3. SmoothScroll.min.js - 用于平滑滚动到页面上的不同部分的JavaScript插件。 4. darkbox.js - 用于显示图库的JavaScript插件。 5. main.js - 用于添加“回到顶部”按钮的JavaScript文件。 此外，代码中的最后一个JavaScript函数是用于添加导航栏平滑滚动效果的JavaScript函数。当用户单击导航栏链接时，该函数将平滑滚动到页面上的不同部分，而不是直接跳转到该部分。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值