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

记住：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.场景

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

二、原因

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

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

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

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

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

赞 (0)

相关推荐

  • 解决ant Design中Select设置initialValue时的大坑

    我出现的问题:例如在编辑活动关联红包的时候,需求是select显示的是红包名称,但是表单提交的时候是红包ID:设置默认值的initialValue为Id的时候,会出现显示是id (需要的是显示名称):如果设置默认值initialValue是名称,那么下一步操作会出现报错 但是我还有一种情况:某个活动关联的红包被删除了,在Select中的可供选项中redPackets没有这个红包的时候,显示的会是红包id,而不是红包名称 错误效果图: 期待正确效果图 解决方案:在默认值的后面加上一个空字符串进行转

  • vue elementui 实现搜索栏公共组件封装的实例代码

    vue elementui 实现搜索栏公共组件封装的实例代码

    1.背景 vue后台管理系统,会有很多表格页面,表格上方会有一些搜索选项,表格直接使用el-table即可,而搜索栏区域每次写起来都很繁琐,而且多人开发情况下每个人写的样式都不相同,布局样式无法统一. 所以要考虑对搜索栏做一个封装,统一配置引用,提升开发维护效率和界面统一. 完成后的效果大概就是长这样: 2.分析 项目使用的是elementui框架,搜索栏这种表单提交,首先要使用el-form组件来封装,而复杂点就是表单项可能有很多种,例如input输入框.select选择框.日期时间选择框.日

  • 解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题

    场景描述: 如下图所示,点击减免天数会出现一个弹窗, 输入天数后点击确定,保存这个值, 但是我在点第二行的减免天数的时候初始应该是空的, 可是现在显示的是第一行输入的值: <Modal title="减免天数" visible={that.state.visible} onOk={that.handleOk.bind(that)} onCancel={that.handleCancel} > <Form horizontal form={form}> <F

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

    记住: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赋值时,可能掺杂了非表单控件

  • 在react项目中使用antd的form组件,动态设置input框的值

    问题: 创建账号时,输入账号后不搜索直接保存,提示查询后,再点搜索就不能搜索这个账号了 原因: 点击保存之后,对表单进行了验证,导致之后请求的数据无法在更新到input框中,也就是说即使在state中有值,也不会更新initialValue值,就导致搜索后的值不能正确填入input中,表单也就提交不了. 解决办法: 不使用initialValue设置动态更新的值,而是使用 this.props.form.setFieldValue({name:data}); 用于动态更新值,就可以解决了. if

  • 解决antd日期选择组件,添加value就无法点击下一年和下一月问题

    原因: 表单监听了关闭事件,执行了setState,若是给closeFloatingLayer增加延时就可看出来antd数据的变化. 解决方法: DatePicker外面套一层div,然后阻止冒泡 补充知识:antd 的 RangePicker 中日期选择近三月 今天遇到一个问题,日期插件中只能选择近三个月.代码如下: 属性中 disabledDate 就是日期禁止选择. 1.当前天之前 2.当前天之后 3.近三月 4.后三月 以上这篇解决antd日期选择组件,添加value就无法点击下一年和下

  • React如何利用Antd的Form组件实现表单功能详解

    React如何利用Antd的Form组件实现表单功能详解

    一.构造组件 1.表单一定会包含表单域,表单域可以是输入控件,标准表单域,标签,下拉菜单,文本域等. 这里先引用了封装的表单域 <Form.Item /> 2.使用Form.create处理后的表单具有自动收集数据并校验的功能,但如果不需要这个功能,或者默认的行为无法满足业务需求,可以选择不使用Form.create并自行处理数据 经过Form.create()包装过的组件会自带this.props.form属性,this.props.form提供了很多API来处理数据,如getFieldDe

  • 详解对于React结合Antd的Form组件实现登录功能

    一.React 结合 Antd 实现登录功能 引入所需的 Antd 组件,代码如下所示: import { Form, Icon, Input, Button, message } from 'antd' 在 Login.jsx 中,创建一个 Login 组件.当对外暴露组件时,需要使用 Form 组件进行包装,包装 Form 组件生成一个新的组件 Form(Login),同时新组件会向 Form 组件传递一个强大的对象属性 form,这样就可以取到 Form 表单的值,这也是高阶组件和高阶函数

  • 解决Antd中Form表单的onChange事件中执行setFieldsValue不生效

    目录 Antd中Form表单的onChange事件中执行setFieldsValue不生效 原因是因为 解决方案 antd Design Form setFieldsValue的使用 解决 结束语 Antd中Form表单的onChange事件中执行setFieldsValue不生效 如果在Form表单中onChange事件中,手写了一个setFieldsValue, 则不会生效. 原因是因为 Form表单会在手写的onChange事件之后执行内部的setFieldsValue,所以会将我们之前手

  • 解决antd Form 表单校验方法无响应的问题

    antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll 里面可以接收校验字段数组, options, 和一个回调函数 from.validateFields([name, age], {}, (err, val)=> {}) 校验全部表单数据 from.validateFields((err, val)=> {}) // 无响应 发现无响应, 无报错, 完全蒙逼了, 排查良久, 添加校验字段后发现可以成功校验, 于是想着大不了我全部手动

  • antd Form组件方法getFieldsValue获取自定义组件的值操作

    自定义组件 1.自定义组件被getFieldsValue包裹,会获得以下属性 onChange方法, 子组件调用此方法,可将值传给父组件,从而Form可拿到自定义组件的值 value属性,获得初始值 2.组件调用 像Form表单内的组件一样调用,就可以了 补充知识:Ant Design Pro,用setFieldsValue方法,给嵌套到Form表单中的DatePicker或RangePicker组件设置默认值 其实用setFieldsValue或者获取setState方法都可以设置DatePi

  • 利用Vue构造器创建Form组件的通用解决方法

    前言 在前端平常的业务中,无论是官网.展示页还是后台运营系统都离不开表单,它承载了大部分的数据采集工作.所以如何更好地实现它,是平常工作中的一个重要问题. 在应用Vue框架去开发业务时,会将页面上每个独立的可视/可交互区域拆分为一个组件,再通过多个组件的自由组合来组成新的页面.例如 <template> <header></header> ... <content></content> ... <footer></footer&

  • 解决Antd Table组件表头不对齐的问题

    背景: 在使用Antd的table组件时,由于表头参数过多,于是设置了scroll属性,在其超出一定宽度后进行滚动 但是在添加了该属性之后,经常会出现表头不对齐的问题: 针对该问题Google 了一下解决方案,但大多不是很完善,为解决问题.现整理下完整的解决方案: 1.对表格的每一行 [columns]设置width属性(留出一行进行宽度自适应): 2.scroll属性中的x选择一个合适的值(或者直接设为 max-content): 如果以上两步仍解决不了对齐问题的话,请继续第三步操作 3.对t

随机推荐