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)
        })
相关推荐
GISer_Jing13 小时前
SSE Conf大会分享——UTOO WASM:AI时代的浏览器原生极速研发套件
前端·人工智能·架构·wasm
Q***l68713 小时前
前端在移动端中的响应式设计
前端
QH_ShareHub13 小时前
R 包中的生命周期触发函数全解析
前端·javascript·数据库
小奶包他干奶奶13 小时前
Webpack学习——如何自定义钩子
前端·学习·webpack
AI3D_WebEngineer13 小时前
企业级业务平台项目设计、架构、业务全解之平台篇
前端·javascript·vue
该用户已不存在13 小时前
免费 SSL 证书缩短至 90 天,你的运维成本还能hold住吗
前端·后端·https
汤姆Tom14 小时前
前端转战后端:JavaScript 与 Java 对照学习指南 (第二篇 - 基本数据类型对比)
java·javascript·全栈
七月十二14 小时前
【Vite】离线打包@iconify/vue的图标
前端·vue.js
星空的资源小屋14 小时前
Explorer++:更强大的Windows文件管理器
javascript·人工智能·django·电脑
米花丶14 小时前
解决前端监控上报 Script Error实践
前端·javascript