【AntDesign】Modal对话框内子组件重复渲染的问题

问题

最近写后台管理系统使用到了Modal对话框组件, 其中组件里包含了子组件Upload 用作图片上传, 但是发现了一个问题 – ** 在编辑数据时, 第二次再打开弹窗的话, upload组件会没法回写图片, 但打印出来是有对数据进行传输的**
【AntDesign】Modal对话框内子组件重复渲染的问题_第1张图片
【AntDesign】Modal对话框内子组件重复渲染的问题_第2张图片

解决

排查发现, 打开Modal时, 里面的Upload组件被调用了两次, 打印了两次fileList 第一次打印出来的fileList有数据, 而第二次fileList为空, 也就调了两次setFileList()的方法, 估计是Modal关闭时未对子元素进行销毁, Modal增加destroyOnClose={true} 就可以啦! 再次打开Modal, 子组件只有调用一次了
【AntDesign】Modal对话框内子组件重复渲染的问题_第3张图片

你可能感兴趣的:(React,Ant,Design,后台管理系统,react.js,前端)