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)
        })
相关推荐
艾斯特_8 小时前
Echarts常用配置项及解释
前端·javascript·echarts
m0_502724958 小时前
飞书真机调试
开发语言·前端·javascript
我只会写Bug啊9 小时前
复制可用!纯前端基于 Geolocation API 实现经纬度获取与地图可视化
前端·高德地图·地图·百度地图·经纬度
刘一说9 小时前
Vue3 模块语法革命:移除过滤器(Filters)的深度解析与迁移指南
前端·vue.js·js
lkbhua莱克瓦2410 小时前
JavaScript核心语法
开发语言·前端·javascript·笔记·html·ecmascript·javaweb
Trae1ounG10 小时前
这是什么dom
前端·javascript·vue.js
比老马还六10 小时前
Bipes项目二次开发/扩展积木功能(八)
前端·javascript
易营宝10 小时前
全球建站SaaS平台能提升SEO评分吗?是否值得切换?
大数据·前端·人工智能
C_心欲无痕10 小时前
Next.js 的服务端路由:对应api文件夹
开发语言·javascript·ecmascript
5134959210 小时前
在Vue.js项目中使用docx和file-saver实现Word文档导出
前端·vue.js·word