解决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 相关文章推荐
最新28个很棒的jQuery 教程
May 28 Javascript
JavaScript中的Math.LN2属性用法详解
Jun 12 Javascript
jQuery实现淡入淡出二级下拉导航菜单的方法
Aug 28 Javascript
JavaScript动态生成二维码图片
Apr 20 Javascript
AngularJS模块详解及示例代码
Aug 17 Javascript
关于微信上网页图片点击全屏放大效果
Dec 19 Javascript
VUE中使用MUI方法
Feb 12 Javascript
Vue 组件修改根实例的数据的方法
Apr 02 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
微信小程序实现蒙版弹出窗功能
Sep 17 Javascript
微信小程序getLocation 需要在app.json中声明permission字段
Mar 03 Javascript
vue实现购物车结算功能
Jun 18 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
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
CodeIgniter扩展核心类实例详解
2016/01/20 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
菜鸟javascript基础资料整理2
2010/12/06 Javascript
Javascript在IE下设置innerHTML时出现未知的运行时错误的解决方法
2011/01/12 Javascript
通过js动态操作table(新增,删除相关列信息)
2012/05/23 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
2013/10/25 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
JS遍历数组及打印数组实例分析
2016/01/21 Javascript
浅谈JS继承_借用构造函数 & 组合式继承
2016/08/16 Javascript
再谈javascript注入 黑客必备!
2016/09/14 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
基于jQuery封装的分页组件
2017/06/26 jQuery
jQuery 实现倒计时天,时,分,秒功能
2018/07/31 jQuery
使用nodejs分离html文件里的js和css详解
2019/04/12 NodeJs
vue微信分享插件使用方法详解
2020/02/18 Javascript
JS如何把字符串转换成json
2020/02/21 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
Vue Render函数创建DOM节点代码实例
2020/07/08 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
使用IronPython把Python脚本集成到.NET程序中的教程
2015/03/31 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
使用CSS3设计地图上的雷达定位提示效果
2016/04/05 HTML / CSS
10条PHP编程习惯
2014/05/26 面试题
运动会领导邀请函
2014/02/05 职场文书
法人委托书范本
2014/09/15 职场文书
2014年财政工作总结
2014/12/10 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书
2016父亲节感恩话语
2015/12/09 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
springboot+VUE实现登录注册
2021/05/27 Vue.js
Pandas自定义选项option设置
2021/07/25 Python
java executor包参数处理功能 
2022/02/15 Java/Android
如何创建一个创建MySQL数据库中的datetime类型
2022/03/21 MySQL