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>
        

	

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

方案二、使用定时器（最不推荐的）

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

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


    < 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博客