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

    这样写才是正确的

  • 相关阅读:
    软件 = 程序 + 软件工程(构建之法读书笔记一)
    网站系统开发需要掌握的技术
    C++迪杰斯特拉算法求最短路径
    strcpy函数在VS2015无法使用的问题
    C++哈夫曼树编码和译码的实现
    java学习中一些疑惑解答(2)
    凯撒加密、解密算法
    利用DOS批处理实现定时关机操作
    C及C++中typedef的简单使用指南
    java学习中的一些疑惑解答
  • 原文地址:https://www.cnblogs.com/cailijuan/p/13650299.html
Copyright © 2020-2023  润新知