一個修改功能,點擊確定調用回調函數往后台發請求,因為想加一個確定按鈕的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(); }); } }
這樣寫才是正確的