zoukankan      html  css  js  c++  java
  • 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();
                });           
            }
        }

    这样写才是正确的

  • 相关阅读:
    shell编程 之 引号、括号的用法总结
    shell编程 之 文件包含
    shell编程 之 输入输出重定向
    shell编程 之 流程控制(条件语句和循环语句)
    shell编程 之 函数
    IOS 定位
    IOS添加多个按钮在导航栏
    移除UIView上面的所有控件
    UITabBarController
    IOS 调用拨打电话Api
  • 原文地址:https://www.cnblogs.com/cailijuan/p/13650299.html
Copyright © 2011-2022 走看看