Dva: 如何解决Modal弹出框多次渲染

[hanagm]

先上一张图看下现象

使用dav最近在重构最近的项目，发现这样的现象。
在user-dashboard里面，当点击madal的确认按钮以后，执行了以下代码：
第一步先把modal隐藏。
yield put({ type: 'hideModal' });

但是如果提交远程保存失败呢？
所以个人感觉因为是服务端返回成功后进行隐藏，
但是实际操作中，会出现界面闪现的问题。
同样，如果成功也会闪现(隐藏一下，然后再次打开)

核心代码如下:
点击modal的确认按钮以后,执行了model中的create

` *create({payload},{call,put,select}){

   let data= yield call(create,{...payload});
    if(data){
      yield  put({
        type:"hideModal"
      })
    }else{
    }
 }`

我监控了Console打印,发现点击确认以后，container先执行了一次render，然后请求返回以后又执行了一次render，所以导致该现象出现

有没有遇到该问题的 同学，给个好的解决建议。。。

[sorrycc]

modal 的 visible state 存在哪里? model 里吗? 是的话，可以安装 redux-devtool，检查下 action 执行情况，为啥重复闪现。

另外，modal 的 visible 也可以考虑存 component state，怎么方便怎么来。

[hanagm]

现在visible在model里面，个人感觉和state状态无关。
这种现象出现应该是执行了一次render导致的。
在这个点击按钮过程中我并没有去更改model里的state，也没有更改component本身的state。监控props数据和上次一样，但是页面确实进行了一次渲染。我下午在这里找了一下类似问题，看到又在同学在issues里面反馈多次render.正常来说，如果没有发生props更改或者component state更改是不会重新render的，我想这就是改问题产生的原因。。

[hanagm]

@sorrycc 我刚把examples下的user-dashboard的user model更改了一下，可以重现该问题。

`更改后的代码如下

*create({ payload }, { call, put }) {
      yield put({ type: 'showLoading' });
      const { data } = yield call(create, payload);
      if (data && data.success) {
        yield put({ type: 'hideModal' }); //放到这里
        yield put({
          type: 'createSuccess',
          payload: {
            list: data.data,
            total: data.page.total,
            current: data.page.current,
            field: '',
            keyword: '',
          },
        });
      }
    },

[sorrycc]

注意下格式，https://guides.github.com/features/mastering-markdown/ 。

[hanagm]

@sorrycc 问题目前已基本解决，解决思路如下：
不 每次创建一个全新的组件，使用modalVisible判断来完成显示和隐藏，如果visible为true，让react自己去做diff,如果false,则清空当前modal, 解决再次打开modal，Form.create initialValue 的问题

User.jsx

return (
    <MainLayout location={location}>
      <div className={styles.normal}>
        <UserSearch {...userSearchProps} />
        <UserList {...userListProps} />
        {modalVisible?<UserModal {...userModalProps} />:"" }
      </div>
    </MainLayout>
  );

如有更好的解决思路劳烦提供一下~thanks~

[jasminecjc]

@hanagm 我也遇到了相似的问题，我的问题是第一次创建完，后台计算，马上创建第二个，当后端返回了第一个的计算结果，创建modal就会闪现多次，这个问题你具体怎么解决的

[pmg1989]

可以新建一个modal的models，剥离一个单独的弹框模型，就解决闪屏问题了，不需要使用UserModalGen()多次异步请求也不会出现闪屏bug，可参见dva-admin

[DistChen]

请问Modal的闪现问题解决了么，看上面的讨论貌似还没有解决方案？

[YalongYan]

解决方法如下：
第一步 先注释掉多余代码， 只保留弹框关闭这个功能；
第二步 把你其他代码主要是改变data的方法，放在一个setTimeout中， 比如加个1s延迟， 这样就不会弹出两次了
原因应该是 在弹框关闭过程了， 你触发了render方法，但是此时render的时候 visible state 还没改变（考虑是异步）
然后可能你触发添加失败的toast, 导致render重新渲染了。
上面说的第二步 其实就是把除了关闭弹框之外的 导致state 修改的方法 也设置成异步，就解决了