• 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();
                });           
            }
        }

    这样写才是正确的

  • 相关阅读:
    六、函数篇
    七、浅拷贝和深拷贝
    五、模块导入方法及常用模块
    四、注释与捕获参数
    三、python对字符串和集合的内存垃圾回收机制
    二、数据类型的常用方法
    一、基本数据类型
    工作必备之正则匹配、grep、sed、awk
    如何检查linux服务器是否被入侵
    linux查看磁盘类型(是否SSD盘)
  • 原文地址:https://www.cnblogs.com/cailijuan/p/13650299.html
Copyright © 2020-2023  润新知