您现在的位置是:首页 >技术杂谈 >react antd Modal里Form设置值不起作用网站首页技术杂谈
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
将其预渲染
解决问题:
知道了原因那解决起来当然就好解决了。
方案一、给 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 >
总结:
我个人更倾向于方式一。
如果你出现了 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博客