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

最新推荐文章于 2024-07-11 11:53:11 发布

崽崽的谷雨

最新推荐文章于 2024-07-11 11:53:11 发布

阅读量1.9k

点赞数 2

文章标签： react.js react-antd

本文链接：https://blog.csdn.net/weixin_44058725/article/details/130932454

版权

文章讲述了在React应用中使用AntDesign的Modal和Form组件时，遇到的Form设置初始值无效的问题。原因是Modal在渲染时，Form可能未完成渲染。提出了两种解决方案：一是使用Modal的forceRender属性预渲染Form；二是不推荐地使用定时器来等待Form渲染完成后再设置值。作者倾向于使用forceRender方法，但提醒注意其可能对性能的影响。

摘要由CSDN通过智能技术生成

问题描述：

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

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

这是因为你在调用 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 >

需要注意的是，当 forceRender 为 true 时，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 >