antd CRUD应用Modal为什么需要使用一个Gen方法？

Question

最近做了些小项目，CRUD，一直没有太在意如下问题：

return (
  <div>
    <List />
    <MyModal {...modalProps} />
  </div>
)

基本功能ok了，但有个问题，就是保存之后，Modal的内容就一直保持上次保存的值，除非强刷浏览器。

而采用如下写法，则可以保证每次保存后，点击新增、修改，都是加载正确的表单默认值。

const ModalGen = () => <MyModal {...modalProps} />

return (
  <div>
    <List />
    <ModalGen />
  </div>
)

问题是解决了，但是还没有想明白为什么？ 求大神指导迷津。 跪谢～～

Answer 1

原因是保存之后，Modal的状态没有变化，所以Modal中的内容并不更新。解决方法就是setState或者“强制刷新”。

ModalGen 其实每次都产生一个新的实例，起到了强制刷新的作用。
也可以改变Modal的key，强制刷新。react Component的key如果变化，就会重新render

我偏向使用key控制。