this.setState设置数据状态时进入死循环一直在执行方法请求

一个修改功能,点击确定调用回调函数往后台发请求,因为想加一个确定按钮的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();
            });           
        }
    }

这样写才是正确的

原文地址:https://www.cnblogs.com/cailijuan/p/13650299.html