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)
        })
相关推荐
kisshyshy1 分钟前
🍦 雪糕、食堂、火车厢:三幅漫画吃透栈、队列与链表
javascript·算法
谷子在生长14 分钟前
纯血鸿蒙自定义弹窗最佳实践:从「到处复制」到「一行调用」
前端·harmonyos
壹方秘境16 分钟前
我用Go语言开发了一个跨平台的HTTPS抓包和调试工具
前端·后端·ios
神秘面具男17 分钟前
HarmonyOS 6.0跨端远程控制
前端·后端
枫树下x17 分钟前
NestJS基础框架
前端
胡志辉18 分钟前
从v8源码和react深入浅出理解 JavaScript 作用域链与闭包
前端·javascript
天蓝色的鱼鱼33 分钟前
React Router v8 来了:react-router-dom 没了,老项目该怎么迁移?
前端·react.js
Bolt1 小时前
TypeScript 7.0 来了:当 tsc 用 Go 重写之后
javascript·typescript·go
闪闪发光得欧2 小时前
前端提效新思路:Gemini 3.5 自动化定位 CSS 异常
前端·css
yingyima2 小时前
掌握正则表达式的核心:贪婪与非贪婪匹配的底层机制
前端