您现在的位置是:首页 >技术杂谈 >react antd Modal里Form设置值不起作用网站首页技术杂谈

react antd Modal里Form设置值不起作用

崽崽的谷雨 2024-07-11 08:06:33
简介react antd Modal里Form设置值不起作用

问题描述:

react antd Modal里Form设置值不起作用,即使用form的api。比如:编辑时带出原有的值。

造成的原因:一般设置值都是在声明周期里设置,比如:componentDidMounted里设置,hook则在useEffetc里设置,因为Form在Modal里,会造成 form还没渲染完,就已经设置完值的情况 即在调用form的实例时,Modal内部的组件并未渲染,才导致了该错误。

为何在 Modal 中调用 form 控制台会报错?

 这是因为你在调用 form 方法时,Modal 还未初始化导致 form 没有关联任何 Form 组件。你可以通过给 Modal 设置 forceRender 将其预渲染

 表单 Form - Ant Design

解决问题:

知道了原因那解决起来当然就好解决了。

方案一、给 Modal 设置 forceRender 将其预渲染:

const [form] = Form.useForm();
    useEffect(() => {

        form.setFieldsValue({ ...xxx })

    }, [])


    < Modal forceRender>
        <Form form={form}/>
	</Modal >

需要注意的是,当 forceRendertrue 时,Modal 组件会在第一次渲染时就会渲染子组件,这可能会导致一些组件的生命周期函数提前执行,从而产生一些不符合预期的结果。因此,在使用 forceRender 属性时,需要特别注意 Modal 中子组件的生命周期函数的执行顺序和时机。 总的来说,forceRender 属性可以在 Modal 渲染时立即渲染子组件,从而提高用户体验,但是也可能会对性能造成一定的影响。在使用时需要根据具体情况进行权衡和选择。  

方案二、使用定时器(最不推荐的)

定时器这个存在一些坑,因为你无法确认 渲染dom需要多久。如果超过设置得时长,就会无法赋值成功。

const [form] = Form.useForm();
   const formRef = useRef(null);
    useEffect(() => {
             setTimeout(()=>{
                form.setFieldsValue({ ...xxx })
             },500)
            
    }, [])


    < Modal>
        <Form form={form} form={form}/>
	</Modal >

总结:

我个人更倾向于方式一。

如果你出现了 Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop?的警告 可以看:Warning: Instance created by useForm is not connected to any Form element. Forget to pass form prop_崽崽的谷雨的博客-CSDN博客

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。