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)
        })
相关推荐
青咕咕5 分钟前
REACT系列 3、性能优化
react.js
黄交大彭于晏28 分钟前
UniApp 全局通知功能实现
前端·vue.js·uni-app
sTone8737533 分钟前
Android核心概念(一)minSdkVersion targetSdkVersion compileSdkVersion
android·前端
林太白42 分钟前
八大数据结构
前端·后端·算法
一 乐43 分钟前
流浪动物救助|流浪猫狗救助|基于Springboot+vue的流浪猫狗救助平台设计与实现(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设
火星数据-Tina43 分钟前
Python + WebSocket 实现实时体育比分系统(含数据库设计与前端演示)
开发语言·前端
国思RDIF框架1 小时前
国思RDIF低代码快速开发框架 v6.2.2版本发布
前端·vue.js·后端
oil欧哟1 小时前
Agent 设计与上下文工程- 02 Workflow 设计模式(上)
前端·网络·人工智能
StarkCoder1 小时前
GetX 状态管理优化:从 GetBuilder 到 Obx 的性能提升实践
前端
小高0071 小时前
深入理解 package.json:前端项目的 "身份证"
前端·javascript·vue.js