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_Jing17 小时前
OSG底层从Texture读取Image实现:readImageFromCurrentTexture
前端·c++·3d
Charles_go17 小时前
C#8、有哪些访问修饰符
java·前端·c#
慧一居士17 小时前
Vue中 class 和 style 属性的区别对比
前端·vue.js
九章云极AladdinEdu18 小时前
项目分享|告别枯燥命令行,构建终端用户界面的 TypeScript 库
javascript·ui·typescript
oil欧哟18 小时前
文心 5.0 来了,百度大模型的破局之战
前端·人工智能·百度·prompt
东华帝君18 小时前
react 切片 和 优先级调度
前端
洞窝技术18 小时前
Next.js 不只是前端框架!我们用它搭了个发布中枢,让跨团队协作效率翻倍
前端·next.js
带着梦想扬帆启航19 小时前
UniApp 多个异步开关控制教程
前端·javascript·uni-app
小高00719 小时前
JavaScript 内存管理是如何工作的?
前端·javascript
是大林的林吖19 小时前
解决 elementui el-cascader组件懒加载时存在选中状态丢失的问题?
前端·javascript·elementui