解决antd的Form组件setFieldsValue的警告问题


Posted in Javascript onOctober 29, 2020

记住:setFieldsValue的字段要对应得上

解决antd的Form组件setFieldsValue的警告

使用antd的Form组件setFieldsValue可能会出现You cannot set a form field before rendering a field associated with the value.警告,字面意义去看是说在 render之前设置了表单值的问题。

解决

在使用setFieldsValue给表单Form的某一个filed赋值时,可能掺杂了非表单控件中的字段,Form表单在赋值和渲染时发现有些字段无法渲染在现有的字段(因为不存在),所以就会报出这样的错误提示

所以在使用this.form.setFieldsValue时,赋值的数据要一一匹配field,用不到的不要赋值即可,这样操作之后错误提示就不再提醒了。

补充知识:解决antd vue中使用setFieldsValue报错“You cannot set a form field before rendering a field associated with ”

一、报错现象

1.在使用antd vue框架中的表单api时,出现了一个warning警告,虽说不影响程序运行,不过咱还是能不报错和警告就不报错和警告

——“You cannot set a form field before rendering a field associated with ”

2.场景

在后台管理系统中渲染列表数据,点击列表中的——编辑按钮——呈现编辑页面——此时页面将会报错,虽说后台渲染的数据都渲染出来了

解决antd的Form组件setFieldsValue的警告问题

二、原因

this.props.form.form.setFieldsValue 传值的时候只能是form中用到的参数(即是getFieldDecorator方法中的field)没有的field一律不允许多传,否则就会报错

即:当点击编辑按钮时,出现页面表单,且通过.setFieldsValue方法设置的当然是弹出的页面表单的表单值,

即:其设置的只能是此表单中出现的值,不能多传,否则将会报错,虽说并不影响程序运行

所以原因:多传递了多余的字段,自己数数和测测,看看是否传递了没有的字段

以上这篇解决antd的Form组件setFieldsValue的警告问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
js判断文本框输入的内容是否为数字
Dec 23 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
实例详解jQuery的无new构建
Aug 02 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
React中使用collections时key的重要性详解
Aug 07 Javascript
get  post jsonp三种数据交互形式实例详解
Aug 25 Javascript
bootstrap 点击空白处popover弹出框隐藏实例
Jan 24 Javascript
基于node+vue实现简单的WebSocket聊天功能
Feb 01 Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 #Javascript
JavaScript实现随机点名小程序
Oct 29 #Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 #Javascript
微信小程序淘宝首页双排图片布局排版代码(推荐)
Oct 29 #Javascript
解决antd datepicker 获取时间默认少8个小时的问题
Oct 29 #Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 #Javascript
微信小程序实现可长按移动控件
Nov 01 #Javascript
You might like
php随机显示图片的简单示例
2014/02/15 PHP
实现获取http内容的php函数分享
2014/02/16 PHP
phplist及phpmailer(组合使用)通过gmail发送邮件的配置方法
2016/03/30 PHP
Yii2框架中使用PHPExcel导出Excel文件的示例
2017/08/09 PHP
php 实现简单的登录功能示例【基于thinkPHP框架】
2019/12/02 PHP
cssQuery()的下载与使用方法
2007/01/12 Javascript
不用MOUSEMOVE也能滑动啊
2007/05/23 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
JavaScript加强之自定义callback示例
2013/09/21 Javascript
javascript日期对象格式化为字符串的实现方法
2014/01/14 Javascript
Bootstrap基本样式学习笔记之标签(5)
2016/12/07 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
Vue.js tab实现选项卡切换
2017/05/16 Javascript
XMLHttpRequest对象_Ajax异步请求重点(推荐)
2017/09/28 Javascript
vue组件传值的实现方式小结【三种方式】
2020/02/05 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
Python 通过URL打开图片实例详解
2017/06/01 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
多个应用共存的Django配置方法
2018/05/30 Python
浅谈python脚本设置运行参数的方法
2018/12/03 Python
Python with用法:自动关闭文件进程
2019/07/10 Python
Python图像处理PIL各模块详细介绍(推荐)
2019/07/17 Python
python pandas 时间日期的处理实现
2019/07/30 Python
布隆过滤器的概述及Python实现方法
2019/12/08 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
系统管理员的职责包括那些?管理的对象是什么?
2013/01/18 面试题
致长跑运动员广播稿
2014/01/31 职场文书
中药专业自荐信范文
2014/03/18 职场文书
竞选班委演讲稿
2014/04/28 职场文书
环保小标语
2014/06/13 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
学校2014年度工作总结
2014/12/06 职场文书
2016年党员读书月活动总结
2016/04/06 职场文书
js面向对象编程OOP及函数式编程FP区别
2022/07/07 Javascript
HTML5页面打开微信小程序功能实现
2022/09/23 HTML / CSS