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)
        })
相关推荐
Hello--_--World3 分钟前
Vue:虚拟Dom
前端·javascript·vue.js
vivo互联网技术43 分钟前
下一代图片格式 AVIF 在 vivo 社区的落地实践
前端·性能优化·图片压缩·avif
咸鱼翻身更入味1 小时前
Vue创建一个简单的Agent聊天
前端
bluetata1 小时前
AI 浪潮与破局:TypeScript 生态实战,让 AI 为你所用
javascript·人工智能·typescript
白鹿第一帅1 小时前
TypeScript+React 全栈生态实战:从架构选型到工程落地,告别开发踩坑
mongodb·react.js·架构·typescript·白鹿第一帅·架构选型·工程落地
布局呆星1 小时前
Vue Router 核心知识点梳理
前端·javascript·vue.js
得物技术1 小时前
基于 Harness + SDD + 多仓管理模式的 AI 全栈开发实践|得物技术
前端·人工智能·后端
不会写DN1 小时前
如何通过 Python 实现招聘平台自动投递
开发语言·前端·python
JiaWen技术圈1 小时前
增量静态再生(ISR)详解:Next.js 中的实现与应用
javascript·git·ubuntu