异步请求回来后Modal多次闪现等问题

[HuangLotus]

现在我有2个问题。
第一个问题：我有一个Modal弹窗，我在弹窗里面点击一个btn 发送异步请求后，我想直接把这个请求返回的数据在不关闭Modal的情况下显示在Modal上。
代码如下：

dispatch({
          type: 'ruleEdit/felValidate',
          payload: param,
          onComplete: (data)=>{
            if (this.state.isMounted) {
              this.setState({'validataResult': data});
            }
            console.log('callback',data,this, this.state);
          },
        });

effects中 代码如下：

 *felValidate({param, onComplete}, {call, put}){
      const {data} = yield call(ruleEditService.felValidate, param);
      onComplete(data);
    },

如果我不加this.state.isMounted这个判断，就会报以下错:
warning.js:36 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the FormulaCheckBtn component.
但是问题是我加了这句if后，我这句this.setState({'validataResult': data});根本不会执行到。根据我的console,this是可以拿到的啊。没有setState成功，我异步请求回来的数据就没法显示到Modal上，(⊙o⊙)，所以为什么没有执行到呢？或者说怎样才能让我异步请求回来的数据正确渲染到我的Modal中呢？我能想到的是通过state.但是现在setState又不行。

第二个问题是：在dispatch后，我在effects中根本没调用put去执行reducer中的改变state的方法，但是根据我打印出来的信息整个state都改变了致使我的component重新render了。直接表现是我的Modal闪了一下，重新render显示了一下。
所以怎样才能让已经显示的Modal不再闪退再多余的重现，而是保持不动，直到我操作完毕后再手动关闭？或者说怎样才能不触发重新render?(关于这个不重新触发的问题，我也查了好几个case,有说用onComplete直接调用回调的，恩我使用了但是遇到上面的第一个问题，或者说用三元运算符的，见#349，但是也不行)

初次使用dva+ant,感觉还是比较好用的，但是我个人对里面有些地方可能不是很理解，所以好崩溃，这个问题调了好久了呢，有人遇到过吗？求指点。

[zjxpcyc]

1、弹窗的 visible 只要不变，就不会被关闭。
this 的问题，错误在你的 component 状态，isMounted ？ 你请求的时候会注销组件？
2、其实跟1 是一样的，你的思路有误区。
正常的做法就可以实现你的需求， btn -> dispatch effect -> put reduce 即可。不需要用到 onComplete 。
另外，即使用到 onComplete , 按照约定也应该是 payload 里面吧。

[HuangLotus]

1.弹窗的visible没有变，但是在发送dispatch后被关闭了又重新打开了，所以用户看到的是闪现了一下。
我请求的时候没有注销组件。我上面的代码可以看得出来。
2.就是因为按照正常的做法btn -> dispatch effect -> put reduce，Modal会闪动,所以才想到用onComplete的方式。但是用onComplete的方式拿到异步请求回来的数据后setState又不行。
3.onComplete的使用方式没有问题，因为onComplete里面的console已经执行了。

[jiangbo2015]

检查弹窗的visible什么时候被设为false,你发送dispatch被关闭后又打开已经说明了问题

[zjxpcyc]

@HuangLotus visible 没有改变，弹窗是不会闪的。如果你确认是没有动 visible 的地方。你看下是否其他的组件里面也有调用 modal 的地方。这里是官方给的建议 https://ant.design/components/modal-cn/#清空旧数据
你可以给你的 modal 加一个 key 试试。如果还出现闪的地方，那建议你仔细过下代码。看看是不是组件嵌套太多，父组件被注销了一次。
有时候注销不一定是显式的写出来，比如你定义个组件变量，一些情况下，它会重新执行，也是会出现注销的情况。

[HuangLotus]

@zjxpcyc @jiangbo2015 谢谢，问题已经全部解决了。
解决方法是：对于用到的Modal Component单独新建一个文件models，亦即剥离一个单独的弹框模型，就解决闪屏问题了，这样即使多次异步请求也不会出现闪屏bug，可参见12 步 30 分钟，完成用户管理的 CURD 应用 。
至于传参state问题也因为这种方式规避而迎刃而解。 谢谢大家！

[nianhua110]

上面的方法太复杂了，你不要用

ModalGen=()=><Modal/>

而是使用

<div>
{modalVisible ? <Modal key={modalKey} {...ModalProps}/>
</div>

在状态树里面维护modalKey
当用户新建或者编辑提交之后，服务器返回成功之后，你就修改状态树里面的modalkey的值，就可以实现功能了．

[18019675002]

可以将Modal放在父组件中使用父组件中的 modalVisible属性去控制模态框的显示和隐藏。
再在Modal标签内部构建子组件页面，这样子组件页面的重新构建就不会影响到Modal了。
<div> <Modal title="添加关联商品" wrapClassName="vertical-center-modal" width="1000px" visible={modalVisible} onOk={this.okHandle} onCancel={() => this.handleChangeModalVisible(false)} > // 子组件 <WrappedRecommendGoodsForm {...parentMethods} recommends={recommends} // 业务参数 /> </Modal> </div>

// 子组件
@connect(({ goods, loading }) => ({ goods, loading: loading.effects['goods/fetchGoodsList'], })) class RecommendGoodsForm extends React.PureComponent { // ........... // ........... }