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)
        })
相关推荐
softshow102613 小时前
html2canvas + jspdf实现页面导出成pdf
开发语言·javascript·pdf
深耕AI14 小时前
【wordpress系列教程】05 文章分类与标签
前端
摘星编程14 小时前
React Native for OpenHarmony 实战:StyleSheet 样式表优化
javascript·react native·react.js
michael_ouyang14 小时前
WebSocket 鉴权方案选型与 Electron 应用的最佳实践
前端·websocket·网络协议·electron
xixixin_14 小时前
【vue】中字符串与数组转换:为何首选 Computed 而非 Methods?
前端·javascript·vue.js
Sylvia33.14 小时前
网球/羽毛球数据API:专业赛事数据服务的技术实现
java·前端·websocket·json
i_am_a_div_日积月累_14 小时前
el-drawer注册全局点击事件无效;el-dialog注册全局点击事件无效
javascript·vue.js·elementui
向下的大树15 小时前
VUE父子组件传参中的触发时机问题:异步场景下的解决方案
前端·javascript·vue.js
英俊潇洒美少年15 小时前
vue2中使用节流防抖函数时,使用的vue状态始终是初始化的数据
前端·javascript·vue.js
棒棒的唐15 小时前
适合小程序使用的将对象数组转换为参数字符串方法
前端·javascript·小程序