ant design 每次打开Modal弹窗都调用接口重新初始化

要求:每次打开修改弹窗都根据该条数据的ID发请求获取数据渲染表格

解决办法:给Modal添加key,每次弹出的时候 改变key的值,保证每次key的值不同

代码:

在state中设定一个初始值,并在Modal中给模态框设置key

constructor(props) {
        super(props);
        this.state = {
            modalKey:0,
        };
    }
<Modal width={800} title="修改" visible={this.state.editModalVisible}
                        onCancel={() => { this.setState({ editModalVisible: false, modalKey: this.state.modalKey + 1 }); }}
                        onOk={this.handleModalOk.bind(this)}
                        confirmLoading={this.state.confirmLoading}
                        key={this.state.modalKey}
                        >
                    </Modal>

在点击确定的回调函数中,将state中的modalKey在原来的基础上加1

handleEditSubmit() {
        const obj = this;
        console.log('原参数:'+obj.state.formData.AGT_ID);
        console.log('修改回调参数1:'+obj.state.formData.reference_id);
        let param = {
            id : obj.state.formData.AGT_ID,
            recomm : obj.state.formData.reference_id,
        }
        const opt = {
          url: agt.info.updateAleAgtInfo,
          type: 'POST',
          dataType: 'json',
          data: param,
        };
        callAjax(opt, (result) => {
          if (result.rspCod === '01000000') {
            openNotice('success', '成功', '提示');
            obj.props.form.resetFields();
            obj.setState({
              modalKey: obj.state.modalKey + 1,
            }, () => {
              obj.setState({
                tdTableReload: false,
              });
            });
          } else {
            openNotice('error', result.rspMsg, '提示');
            obj.setState({
              confirmLoading: false,
            });
          }
        }, () => {
          openNotice('error', rspInfo.RSP_NETWORK_ERROR, '提示');
          obj.setState({
            confirmLoading: false,
          });
        });
    }

在Modal弹窗的取消按钮中,将state中的modalKey在原来的基础上加1

<Modal width={800} title="修改" visible={this.state.editModalVisible}
                        onCancel={() => { this.setState({ editModalVisible: false, modalKey: this.state.modalKey + 1 }); }}
                        onOk={this.handleModalOk.bind(this)}
                        confirmLoading={this.state.confirmLoading}
                        key={this.state.modalKey}
                        >
                    </Modal>

这样就能在每次打开弹窗的时候都能重新刷新弹窗中表格的内容了

参考:https://blog.csdn.net/qq_40319394/article/details/105814183

posted @ 2020-09-16 10:36  無玑小姐  阅读(6653)  评论(0编辑  收藏  举报