要求:每次打开修改弹窗都根据该条数据的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