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

 更新时间:2020年10月29日 14:29:13   作者:混血哲谈  
这篇文章主要介绍了解决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的警告问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3.0自定义指令(drectives)知识点总结

    vue3.0自定义指令(drectives)知识点总结

    在本篇文章里小编给大家整体了一篇关于vue3.0自定义指令(drectives)知识点总结,有兴趣的朋友们可以学习下。
    2020-12-12
  • VUE前端如何处理后端接口返回的图片详解

    VUE前端如何处理后端接口返回的图片详解

    在现代Web开发中,前端应用经常需要从后端接口获取图片数据,下面这篇文章主要介绍了VUE前端如何处理后端接口返回的图片的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • 对Vue3中reactive的深入理解

    对Vue3中reactive的深入理解

    这篇文章主要介绍了对Vue3中reactive的深入理解,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05
  • vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法

    vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法

    本文主要介绍了vueCli 4.x升级5.x报错:Progress Plugin Invalid Options的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • vue如何实现二进制流文件导出excel

    vue如何实现二进制流文件导出excel

    这篇文章主要介绍了vue如何实现二进制流文件导出excel,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-06-06
  • Vue基于el-breadcrumb实现面包屑功能(操作代码)

    Vue基于el-breadcrumb实现面包屑功能(操作代码)

    这篇文章主要介绍了Vue基于el-breadcrumb实现面包屑功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-09-09
  • Vue实现多图添加显示和删除

    Vue实现多图添加显示和删除

    这篇文章主要为大家详细介绍了Vue实现多图添加显示和删除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-05-05
  • Vue3中createWebHistory和createWebHashHistory的区别详析

    Vue3中createWebHistory和createWebHashHistory的区别详析

    这篇文章主要给大家介绍了关于Vue3中createWebHistory和createWebHashHistory区别的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2023-06-06
  • Vue-不允许嵌套式的渲染方法

    Vue-不允许嵌套式的渲染方法

    今天小编就为大家分享一篇Vue-不允许嵌套式的渲染方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • Vue+Echart柱状图实现疫情数据统计

    Vue+Echart柱状图实现疫情数据统计

    这篇文章主要介绍了在Vue nuxt项目中,如何使用Echart(百度图表)柱状图来实现疫情数据统计,感兴趣的小伙伴可以跟随小编一起学习一下
    2021-12-12

最新评论