react 分步表单中使用useEffect来更新表单值的问题

问题背景:我在完成一个分步表单的功能的时候,在进行点击下一步的时候,会通过useEffect 来监听下一步或者上一步的动作,进行表单赋值,我使用

    useEffect(() => {setFieldsValue(formValues);}, [stepNum])

直接赋值的时候就会提示

Warning: You cannot set a form field before rendering a field associated with the value.

原因是因为使用  getFieldDecorator 注册的值,在这个时候表单设置值的时候没有这些字段,导致的异常提示。

解决方案:

        使用 form.getFieldsValue 来获取当前项,然后对比赋值,最终在调用  setFieldsValue(obj)即可。这个时候obj就不包含其他未注册的值了
        formValues 是收集到的每项表单的值。

 Object.keys(form.getFieldsValue()).forEach(key => {const obj = {};obj[key] = formValues[key] || null;setFieldsValue(obj)})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/518547.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

iStoreOS系统-HomeAssistant服务下载安装HACS

iStoreOS系统-HomeAssistant服务下载安装HACS 1. HACS HACS(Home Assistant Community Store)是Home Assistant的一个插件商店,它允许用户轻松地浏览、安装和管理各种为Home Assistant开发的自定义插件和集成。通过HACS,用户可以…

Apache POI Excel的读写

1、 POI介绍 Apache POI是用Java编写的免费开源的跨平台的Java API,Apache POI提供API给Java程 序对Microsoft Office格式档案读和写的功能,其中使用最多的就是使用POI操作Excel文 件。 jxl:专门操作Excel maven坐标: POI结构:…

ServletContext

ServletContext 1.共享数据 ServletContext servletContext this.getServletContext(); String username "徐凤年"; servletContext.setAttribute("username",username);ServletContext servletContext this.getServletContext(); String username (…

真我诞生·2024消费者生活趋势报告(小红书平台)

跨过众声喧嚣的2023年,面对涌动的社会情绪、技术的创新以及流行风潮的更替,千瓜将2024年的隐形主轴定义为「真性情」,抛开宏观叙事法,透过“十大趋势”落到人文关怀上,有温度的营销叙事,才能吸引、影响人。…

最新的前端开发技术(2024年)

关于作者: 还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas&#xff0…

GraphQL

从表中查询10条数据 {user_info(_limit: 100) {idname} }根据id查询数据 {user_info(_where: {id: 1727515006802587648}_order_by: {create_time: _desc}_limit: 10) {idname} }外键联表查询(特别注意写法:update_by.id): {speaker_info(update_by.id: {_eq: 1729043650301…

Vue+SpringBoot打造校园电商物流云平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 数据中心模块2.2 商品数据模块2.3 快递公司模块2.4 物流订单模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 商品表3.2.2 快递公司表3.2.3 物流订单表 四、系统展示五、核心代码5.1 查询商品5.2 查询快递公司5.3 查…

KBPC5010-ASEMI逆变器整流桥KBPC5010

编辑:ll KBPC5010-ASEMI逆变器整流桥KBPC5010 型号:KBPC5010 品牌:ASEMI 封装:KBPC-4 最大重复峰值反向电压:1000V 最大正向平均整流电流(Vdss):50A 功率(Pd):大功率 芯片个数&#xff…

解决gradle构建java项目,在执行时打印到控制台出现乱码的问题,网上所能搜到的99%的解决文章都是错的

我一直喜欢用gradle构建项目,不怎么喜欢用maven,因为gradle可以执行脚本,功能强大,比maven的xml方式要简洁多了,但最近才发现一个奇怪的问题,就是在idea指定gradle编译和执行时,输出中文到控制台…

Facial Micro-Expressions:An Overview 阅读笔记

Proceedings of the IEEE上一篇微表情相关的综述,写的很详细。从心理学与计算机两个领域阐述了微表情生成的原因与相关算法,值得仔细研读。 摘要: Four main tasks in ME analysis arespecifically discussed,including ME spotting,ME recog…

【JAVA/Web】数组转对象

一. 需求 数组转对象 数组结构 List:[{id:1,code:phone,value:10101001},{id:2,code:name,value:admin},{id:3,code:address,value:XXXXXX} ]二. 数组转对象(键值对映射关系) 对象结构 object:{phone:10101001,name:admin,address:XXXXXX }2.1 Java…

外包干了5天,技术退步明显。。。。。

在湖南的一个安静角落,我,一个普通的大专生,开始了我的软件测试之旅。四年的外包生涯,让我在舒适区里逐渐失去了锐气,技术停滞不前,仿佛被时间遗忘。然而,生活的转机总是在不经意间降临。 与女…