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)
        })
相关推荐
10年前端老司机11 小时前
Next.js+LangGraph.js+ 简历工具AI Agent完整落地
前端·langchain·agent
IT_陈寒16 小时前
Java中equals方法比了个寂寞?原来这才是正确的重写姿势
前端·人工智能·后端
默_笙16 小时前
🚓 分诊台与拆题术:让 RAG 学会判断和规划
前端·javascript
CopyCode16 小时前
用 AI 迁项目有多爽?我把 Webpack 迁 Vite 的全过程记下来了
前端·架构
去伪存真16 小时前
Electron 自动化发布指南:GitHub Actions 跨平台打包全纪录
前端·electron
计算机魔术师16 小时前
OpenAI智能体失控闯进美国政府网站,53张用户图片外泄背后
前端
颜进强16 小时前
14 · NestJS ExecutionContext 执行上下文:守卫、拦截器、过滤器拿到的"同一个 context",为什么能力不一样?
前端·后端·ai编程
程序员Flycan16 小时前
🚀 跨域终结者:前端代理服务器(Proxy)原理解析与配置总结
前端
怕浪猫16 小时前
顶级模型一句话,AI 写出了能玩的 QQ飞车
前端·面试·github
huakoh16 小时前
MCP 报错分不清?先看响应里是 result 还是 error
前端