一个修改功能,点击确定调用回调函数往后台发请求,因为想加一个确定按钮的loading效果
原来的代码
//模态框确认点击事件,修改子页面props valid状态,触发子页面执行回调 handleModalOk() { this.setState({ modelIsValid: true, }, () => { this.setState({ modelIsValid: false, }); }); } //修改模态框子页面回调 callbackValid(oprType, errors, data) { const obj = this; if (!!errors) { return; }else if(data.reference_id == undefined){ openNotice('error', '请先选择代理商'); return; }else { obj.handleEditSubmit(data); } }
这个时候控制loading效果的confirmLoading状态值还是初始的false
第一次修改后的代码
//模态框确认点击事件,修改子页面props valid状态,触发子页面执行回调 handleModalOk() { this.setState({ modelIsValid: true, }, () => { this.setState({ modelIsValid: false, }); }); } //修改模态框子页面回调 callbackValid(oprType, errors, data) { const obj = this; if (!!errors) { return; }else if(data.reference_id == undefined){ openNotice('error', '请先选择代理商'); return; }else { this.state.formData = {}; this.setState({ formData: Object.assign({}, this.state.formData, filterObject(data)), formReset: false, confirmLoading: true, }, () => { obj.handleEditSubmit(); }); } }
这个时候就会陷入死循环,一直调用请求接口handleEditSubmit,最后经过很久的查找,终于改好了
//模态框确认点击事件,修改子页面props valid状态,触发子页面执行回调 handleModalOk() { this.setState({ modelIsValid: true, }); } //修改模态框子页面回调 callbackValid(oprType, errors, data) { this.setState({ modelIsValid: false, }); const obj = this; if (!!errors) { return; }else if(data.reference_id == undefined){ openNotice('error', '请先选择代理商'); return; }else { this.state.formData = {}; this.setState({ formData: Object.assign({}, this.state.formData, filterObject(data)), formReset: false, confirmLoading: true, }, () => { obj.handleEditSubmit(); }); } }
这样写才是正确的