antd CRUD应用Modal为什么需要使用一个Gen方法?
本文介绍了antd CRUD应用Modal为什么需要使用一个Gen方法?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
最近做了些小项目,CRUD,一直没有太在意如下问题:
return (
<div>
<List />
<MyModal {...modalProps} />
</div>
)
基本功能ok了,但有个问题,就是保存之后,Modal的内容就一直保持上次保存的值,除非强刷浏览器。
而采用如下写法,则可以保证每次保存后,点击新增、修改,都是加载正确的表单默认值。
const ModalGen = () => <MyModal {...modalProps} />
return (
<div>
<List />
<ModalGen />
</div>
)
问题是解决了,但是还没有想明白为什么? 求大神指导迷津。 跪谢~~
解决方案
原因是保存之后,Modal的状态没有变化,所以Modal中的内容并不更新。解决方法就是setState或者强制刷新。
ModalGen 其实每次都产生一个新的实例,起到了强制刷新的作用。
也可以改变Modal的key,强制刷新。react Component的key如果变化,就会重新render
我偏向使用key控制。
这篇关于antd CRUD应用Modal为什么需要使用一个Gen方法?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文