前端BUG总结-按钮的loading状态

前端BUG总结-按钮的loading状态

背景

1. BUG1: 接口返回报错后，下一步按钮一直loading，需要恢复正常状态
2. BUG2: 按钮的loading状态在报错后仍为loading状态，并未还原

代码

if (values.intlShippingType === "Calculated") {
       params.intlShippingPolicyInfoServiceArr.forEach(item => {//检测必填项
           if (item.shipToLocationType === null || item.shipToLocationType === undefined || item.shipToLocationType === "") {
               message.warning("请选择收货地点");
               flag = true
               return false//结束当前forEach循环，则程序可以继续执行循环之外代码，即flag可继续设置为true，并且执行setState方法
           if (item.shippingService === null || item.shippingService === undefined || item.shippingService === "") {
               message.warning("请选择服务");
               flag = true
               return false//结束当前forEach循环，则程序可以继续执行循环之外代码，即flag可继续设置为true，并且执行setState方法
           }
       })
		//数组去重
       let arr = params.intlShippingPolicyInfoServiceArr;
       var tempHash = {};
       let initLength=arr.length;
       let noRepeatLength = arr.reduce(function (item, next) {
         tempHash[next.shipToLocationType] && (tempHash[next.shippingService + '_'+ next.shipToLocationType] == next.shippingService) ? "" : (tempHash[next.shipToLocationType] = true) && (tempHash[next.shippingService + '_'+next.shipToLocationType] = next.shippingService) && item.push(next);
         return item
       }, []).length;
       if(initLength!==noRepeatLength){//如果检测项重复则报错
           message.warning("全球运输中收货和服务不能重复"); 
           flag = true;
           return false//结束当前的方法，则当前方法的以后代码无法继续执行，即无法继续执行setState方法，则loading状态一直为loading，并不还原
       }
   }
   if (flag) {
       setTimeout(() => {//延迟为了显示loading状态切换
           this.setState({
               loading: false
           });
       }, 500)
       return;
   }