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)
        })
相关推荐
忆江南2 分钟前
iOS 性能优化全面详解
前端
lichenyang4534 分钟前
HAP / HAR / HSP 到底啥区别?顺带把「导入」那点疑惑讲清楚
前端
基德爆肝c语言6 分钟前
MySQL表的操作
前端·数据库·mysql
米丘8 分钟前
SSE (server-sent events)
javascript·网络协议
秃头网友小李11 分钟前
前端难点:Element Plus 样式覆盖 —— :deep()、CSS 变量与滚动状态类名
前端·vue.js
the_answer13 分钟前
XSS 与 CSRF 深度解析
前端
打呵欠的猫21 分钟前
AI 生成的代码你敢直接上线吗?我总结出 3 条铁律
前端·ai编程
极速蜗牛23 分钟前
我在 Taro 小程序项目里实践的 API First + AI 编程方式
前端·人工智能·后端
桜吹雪29 分钟前
所有智能体架构(3):Planning(计划任务)
javascript·人工智能·langchain
gCode Teacher 格码致知38 分钟前
Javascript技术:CSS 中rem、vh 和 px各有其最佳适用场景-由Deepseek产生
开发语言·javascript·css