loading为什么不更新

场景：封装好的弹框，按钮上加了个loading状态，根据传入的值弹框提交的模块内容不一样。loading更新过后，但是值没有变。

注）写法一loading不更新，写法二loading值更新。

一、写法一

写法一中的 acceptanceReject 函数是一个异步函数，它会在异步操作完成后才会执行 finally 中的代码。这意味着 finally 中的 setLoading(false) 会在 acceptanceReject 函数中所有异步操作完成后才执行，包括 await rejectDataDs.current?.validate()、await getTaskId(instanceId) 和 await postAcceptance(params)。

因此，在写法一中，即使在 acceptanceReject 函数中设置了 setLoading(true)，但在 handleSubmit 函数中并没有等待 acceptanceReject 函数中的异步操作完成，所以在 handleSubmit 中立即打印 loading 时，可能仍然是旧值。

  /** 提交 */const handleSubmit = () => {switch (type) {case 'one': oneReject();break;case 'two': twoReject();break;case 'three': fourReject();break;default:break;}};const one= async () => {setLoading(true);try {const validate = await rejectDataDs.current?.validate();if (!validate) {return;}console.log('执行了嘛');const { id, instanceId } = formDataDs.current?.toData();const taskIdValue = await getTaskId(instanceId);const params: ItemAcceptance = {...rejectDataDs.current?.toData(),id,instanceId,approveResult: 'N',taskId: taskIdValue?.[0]?.taskId,};debuggerconst res = await postAcceptance(params);handleSuccess(res, 'acceptanceReject');} finally {setLoading(false);}};const two= async () => {const { id, instanceId } = formDataDs.current?.toData();const { approveOpinion } = rejectDataDs.current?.toData();const taskIdValue = await getTaskId(instanceId);const params: DetermineParams = {id,taskId: taskIdValue?.[0]?.taskId,instanceId,approveOpinion,approveResult: 'N',};const res = await postDetermine(params);handleSuccess(res, 'decideReject');};const three= async () => {const {id,pkNo,instanceId,subInstanceId,} = formDataDs.current?.toData();const { approveOpinion } = rejectDataDs.current?.toData();const taskIdValue = await getTaskId(subInstanceId);const params: ApprovalParams = {id,pkNo,taskId: taskIdValue?.[0]?.taskId,instanceId,subInstanceId,approveResult: 'N',approveOpinion,};const res = await postApprove(params);handleSuccess(res, 'approveReject');};

解决方法：因为switch中忘记加异步await了。

二：写法二

写法二中，所有异步操作都在同一个函数中，因此 setLoading(true) 和后续的异步操作是连续执行的，所以可以在后续代码中获取到正确的 loading 值。

  const handleSubmit = async () => {setLoading(true);try {const validate = await rejectDataDs.current?.validate();if (!validate) {return;}const { id, instanceId } = formDataDs.current?.toData();const taskIdValue = await getTaskId(instanceId);const params: ItemAcceptance = {...rejectDataDs.current?.toData(),id,instanceId,approveResult: 'N',taskId: taskIdValue?.[0]?.taskId,};console.log('loading', loading);const res = await postAcceptance(params);handleSuccess(res, 'acceptanceReject');} finally {setLoading(false);}};

三、完整代码(问题版本)

封装好的完整代码如下：

import {ApprovalParams,DetermineParams,ItemAcceptance,
} from '@/interface/channelPk/main';
import { languageConfig } from '@/language/language';
import { Button, Form, message, Modal, TextArea } from 'choerodon-ui/pro';
import DataSet from 'choerodon-ui/dataset/data-set/DataSet';
import React, { useEffect, useState } from 'react';
import { LabelLayout } from 'choerodon-ui/pro/lib/form/enum';
import { ButtonColor } from 'choerodon-ui/pro/lib/button/enum';
import {postAcceptance,postApprove,postDetermine,
} from '@/api/channelPk/main';
import {getTaskId,handleCancel,pubPath,
} from '@/pages/channelPk/detail/hook';
import { FieldType } from 'choerodon-ui/dataset/data-set/enum';
import { useHistory } from 'dva';
import { set } from 'choerodon-ui/dataset/object-chain-value';interface HandleRejectProps {visible: boolean;setVisible: (val: boolean) => void;formDataDs: DataSet;type: string;
}let modal: any;
const RejectModel: React.FC<HandleRejectProps> = ({visible,formDataDs,type,setVisible,
}) => {let history = useHistory();const [loading, setLoading] = useState(false);/** ds 驳回 */const rejectDataDs = new DataSet({autoCreate: true,fields: [{name: 'approveOpinion',type: FieldType.string,label: languageConfig('rejectReason', '驳回原因'),placeholder: languageConfig('planceholder.rejectReason','请输入驳回原因',),required: true,},],});useEffect(() => {if (visible) {openModal();}}, [visible]);/** 弹框打开 */const openModal = () => {modal = Modal.open({title: languageConfig('btn.reject', '驳回'),okText: languageConfig('btn.confirm', '确定'),closable: true,children: <Box />,footer: (<div style={{ textAlign: 'right' }}><Buttonloading={loading}color={ButtonColor.primary}onClick={() => handleSubmit()}>{languageConfig('btn.confirm', '确定')}</Button><Buttonloading={loading}onClick={() => {modal.close();setVisible(false);}}>{languageConfig('btn.cancel', '取消')}</Button></div>),});};/** 内容 */const Box = () => {return (<div className="ltc-c7n-style"><div className="customer"><div className="border"></div><FormdataSet={rejectDataDs}labelWidth={80}columns={4}labelLayout={LabelLayout.vertical}className="reject"><TextAreaname="approveOpinion"rows={4}colSpan={4}newLine={true}// maxLength={200}showLengthInfoclearButton/></Form></div></div>);};/** 提交 */const handleSubmit = async () => {const validate = await rejectDataDs.current?.validate();if (!validate) {return;}setLoading(true);switch (type) {case 'acceptance': // 受理驳回await acceptanceReject();break;case 'decide': // 判定驳回await decideReject();break;case 'one': // 战区内未确权-一级审批await oneReject();break;case 'two': // 战区内未确权-二级审批await twoReject();break;case 'four': // 战区内已确权-二级审批await fourReject();break;case 'seven': // 跨战区await sevenReject();break;default:break;}};/** 【受理】驳回 */const acceptanceReject = async () => {const { id, instanceId } = formDataDs.current?.toData();const taskIdValue = await getTaskId(instanceId);const params: ItemAcceptance = {...rejectDataDs.current?.toData(),id,instanceId,approveResult: 'N',taskId: taskIdValue?.[0]?.taskId,};const res = await postAcceptance(params);handleSuccess(res, 'acceptanceReject');};/** 【判定】驳回(跨战区) */const decideReject = async () => {const { id, instanceId } = formDataDs.current?.toData();const { approveOpinion } = rejectDataDs.current?.toData();const taskIdValue = await getTaskId(instanceId);const params: DetermineParams = {id,taskId: taskIdValue?.[0]?.taskId,instanceId,approveOpinion,approveResult: 'N',};const res = await postDetermine(params);handleSuccess(res, 'decideReject');};/** 【战区内未确权-一级审批】驳回 */const oneReject = async () => {const {id,pkNo,instanceId,subInstanceId,} = formDataDs.current?.toData();const { approveOpinion } = rejectDataDs.current?.toData();const taskIdValue = await getTaskId(subInstanceId);const params: ApprovalParams = {id,pkNo,taskId: taskIdValue?.[0]?.taskId,instanceId,subInstanceId,approveResult: 'N',approveOpinion,};const res = await postApprove(params);handleSuccess(res, 'approveReject');};/** 【战区内未确权-二级审批】驳回 */const twoReject = async () => {const {id,pkNo,instanceId,subInstanceId,} = formDataDs.current?.toData();const { approveOpinion } = rejectDataDs.current?.toData();const taskIdValue = await getTaskId(subInstanceId);const params: ApprovalParams = {id,pkNo,taskId: taskIdValue?.[0]?.taskId,subInstanceId,instanceId,approveOpinion,approveResult: 'N',};const res = await postApprove(params);handleSuccess(res, 'approveReject');};/** 【战区内已确权-二级审批-一致】驳回 */const fourReject = async () => {const {id,pkNo,instanceId,subInstanceId,} = formDataDs.current?.toData();const { approveOpinion } = rejectDataDs.current?.toData();const taskIdValue = await getTaskId(subInstanceId);const params: ApprovalParams = {id,pkNo,taskId: taskIdValue?.[0]?.taskId,subInstanceId,instanceId,approveOpinion,approveResult: 'N',};const res = await postApprove(params);handleSuccess(res, 'approveReject');};/** 【跨战区-审批】：驳回 */const sevenReject = async () => {const {channelRemoveId,pkNo,subInstanceId,instanceId,} = formDataDs.current?.toData();const { approveOpinion } = rejectDataDs.current?.toData();const taskIdValue = await getTaskId(subInstanceId);const params: ApprovalParams = {id: channelRemoveId,pkNo,taskId: taskIdValue?.[0]?.taskId,subInstanceId,instanceId,approveOpinion,approveResult: 'N',};const res = await postApprove(params);handleSuccess(res, 'approveReject');};/** 公共：回调 */const handleSuccess = (res: any, kind: string) => {setLoading(false);if (res === '操作成功！') {message.success(res, undefined, undefined, 'top');modal.close();handleCancel();history.replace(`${pubPath}/success?from=${kind}`);} else {message.warning(res.message, undefined, undefined, 'top');}};return <></>;
};export default RejectModel;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.rhkb.cn/news/465653.html

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

单臂路由实现不同VLAN之间设备通信

单臂路由实现不同VLAN之间设备通信

转载请注明出处 本实验为单臂路由配置&#xff0c;目的为让不同VLAN之间的设备能够互相通信。 1.首先&#xff0c;按照要求配置两个pc的ip地址&#xff0c;以pc0为例子&#xff1a; 2在交换机创建vlan10和vlan20 3.划分vlan&#xff0c;pc0为vlan10的设备&#xff0c;pc1为vla…
阅读更多...
机器学习（三）——决策树（附核心思想、重要算法、概念（信息熵、基尼指数、剪枝处理）及Python源码）

机器学习（三）——决策树（附核心思想、重要算法、概念（信息熵、基尼指数、剪枝处理）及Python源码）

目录 关于1 基本流程2 划分属性的选择2.1 方法一&#xff1a;依据信息增益选择2.2 方法二&#xff1a;依据增益率选择2.3 方法三&#xff1a;依据基尼指数选择 3 剪枝处理&#xff1a;防止过拟合3.1 预剪枝3.2 后剪枝 4 连续与缺失值4.1 连续值处理4.2 缺失值处理 5 多变量决策…
阅读更多...
Ubuntu和Debian系列的Release默认shell解释器变更

Ubuntu和Debian系列的Release默认shell解释器变更

Debian 12 Bookworm 和 Ubuntu 24.04 中默认的 shell 解释器已经由 bash 变更为了 dash 。 这个变化对于我们直接在 CLI 上执行 Linux command 无影响&#xff0c;但对于执行shell解释性程序有影响&#xff0c;已知 bash 中的 变量正规表达式 &#xff08;如 ${GIT_COMMIT:0:8…
阅读更多...
ReLU6替换ReLU为什么可以增强硬件效率？

ReLU6替换ReLU为什么可以增强硬件效率？

ReLU6&#xff08;Rectified Linear Unit 6&#xff09;是ReLU的一种变体&#xff0c;它在ReLU的基础上增加了一个上限值6&#xff0c;即输出范围被限制在[0, 6]之间。 这种变化在硬件实现中可以带来以下几个方面的效率提升&#xff1a; 1. 数据表示的简化 ReLU的输出范围是[…
阅读更多...
vscode在windows和linux如何使用cmake构建项目并make生成可执行文件，两者有什么区别

vscode在windows和linux如何使用cmake构建项目并make生成可执行文件，两者有什么区别

vscode在windows和linux如何使用cmake构建项目并make生成可执行文件&#xff0c;两者有什么区别 windows默认使用的是最新的visual studio&#xff0c;而linux默认就是cmake 文章目录 vscode在windows和linux如何使用cmake构建项目并make生成可执行文件&#xff0c;两者有什么…
阅读更多...
Spirngboot集成Knife4j spirngboot版本2.7.17 Knife4j版本4.0.0

Spirngboot集成Knife4j spirngboot版本2.7.17 Knife4j版本4.0.0

Knife4j是什么&#xff1f;有什么作用&#xff1f; ‌Knife4j‌是一个基于Swagger的Java RESTful API文档工具&#xff0c;旨在帮助开发者轻松生成和维护API文档。它继承并增强了Swagger的功能&#xff0c;简化了使用流程&#xff0c;并提供了一系列增强功能&#xff0c;如接口…
阅读更多...
ROS2humble版本使用colcon构建包

ROS2humble版本使用colcon构建包

colcon与与catkin相比&#xff0c;没有 devel 目录。 创建工作空间 首先&#xff0c;创建一个目录 ( ros2_example_ws ) 来包含我们的工作区: mkdir -p ~/ros2_example_ws/src cd ~/ros2_example_ws 此时&#xff0c;工作区包含一个空目录 src : . └── src1 directory, …
阅读更多...
GY-56 (VL53L0X) 激光测距

GY-56 (VL53L0X) 激光测距

文章目录 一、GY-56 简介二、引脚功能三、通信协议1.串口协议&#xff1a; 当 GY-56 PS 焊点开放时候使用(默认)&#xff08;1&#xff09;串口通信参数&#xff08;默认波特率值 9600bps&#xff09;&#xff08;2&#xff09;模块输出格式&#xff0c;每帧包含 8-13 个字节&a…
阅读更多...
C语言 | Leetcode C语言题解之第541题反转字符串II

C语言 | Leetcode C语言题解之第541题反转字符串II

题目&#xff1a; 题解&#xff1a; void swap(char* a, char* b) {char tmp *a;*a *b, *b tmp; }void reverse(char* l, char* r) {while (l < r) {swap(l, --r);} }int min(int a, int b) {return a < b ? a : b; }char* reverseStr(char* s, int k) {int n strl…
阅读更多...
提升网站安全性 HTTPS的重要性与应用指南

提升网站安全性 HTTPS的重要性与应用指南

内容概要 在如今数字化快速发展的时代&#xff0c;网站安全显得尤为重要。许多用户在访问网站时&#xff0c;尤其是涉及个人信息或金融交易时&#xff0c;对数据传输的安全性有着高度的关注。HTTPS&#xff08;超文本传输安全协议&#xff09;正是为了满足这种需求而诞生的。通…
阅读更多...
Transformer究竟是什么？预训练又指什么？BERT

Transformer究竟是什么？预训练又指什么？BERT

目录 Transformer究竟是什么？ 预训练又指什么？ BERT的影响力 Transformer究竟是什么？ Transformer是一种基于自注意力机制（Self-Attention Mechanism）的神经网络架构，它最初是为解决机器翻译等序列到序列（Seq2Seq）任务而设计的。与传统的循环神经网络（RNN）或卷…
阅读更多...
OpenDroneMap Webodm

OpenDroneMap Webodm

OpenDroneMap & Webodm OpenDroneMap Webodm 开源无人机航拍系列图像及其它系列图像三维重建软件。很棒的开源无人机测绘软件OpenDroneMap,从航拍图像生成精确的地图、高程模型、3D 模型和点云。 应用领域 Mapping & Surveying 测绘和测量 从图像测量获得高精度的可…
阅读更多...
Java+Swing可视化图像处理软件

Java+Swing可视化图像处理软件

JavaSwing可视化图像处理软件 一、系统介绍二、功能展示1.图片裁剪2.图片缩放3.图片旋转4.图像灰度处理5.图像变形6.图像扭曲7.图像移动 三、系统实现1.ImageProcessing.java 四、其它1.其他系统实现2.获取源码 一、系统介绍 该系统实现了图片裁剪、缩放、旋转、图像灰度处理、…
阅读更多...
迈入国际舞台，AORO M8防爆手机获国际IECEx、欧盟ATEX防爆认证

迈入国际舞台，AORO M8防爆手机获国际IECEx、欧盟ATEX防爆认证

近日&#xff0c;深圳市遨游通讯设备有限公司&#xff08;以下简称“遨游通讯”&#xff09;旗下5G防爆手机——AORO M8&#xff0c;通过了CSA集团的严格测试和评估&#xff0c;荣获国际IECEx及欧盟ATEX防爆认证证书。2024年11月5日&#xff0c;CSA集团和遨游通讯双方领导在遨游…
阅读更多...
string模拟实现插入+删除

string模拟实现插入+删除

个人主页&#xff1a;Jason_from_China-CSDN博客 所属栏目&#xff1a;C系统性学习_Jason_from_China的博客-CSDN博客 所属栏目&#xff1a;C知识点的补充_Jason_from_China的博客-CSDN博客 string模拟实现reserve 这里实现的是扩容 扩容这里是可以实现缩容&#xff0c;可以实现…
阅读更多...
如何实现KIS私有云数据到聚水潭的高效集成

如何实现KIS私有云数据到聚水潭的高效集成

KIS私有云数据集成到聚水潭&#xff1a;KIS-供应商——>空操作案例分享 在企业信息化建设中&#xff0c;数据的高效流动和准确对接是提升业务效率的关键。本文将重点介绍如何通过轻易云数据集成平台&#xff0c;将KIS私有云中的供应商数据无缝集成到聚水潭系统&#xff0c;…
阅读更多...
GESP4级考试语法知识（算法概论（三））

GESP4级考试语法知识（算法概论（三））

爱因斯坦的阶梯代码&#xff1a; //算法1-12 #include<iostream> using namespace std; int main() {int n1; //n为所设的阶梯数while(!((n%21)&&(n%32)&&(n%54)&&(n%65)&&(n%70)))n; //判别是否满足一组同余式cout<<n<…
阅读更多...
【无标题】123

【无标题】123

软件包管理器yum yum类似应用商店客户端&#xff0c;有人已经把软件写好放在服务器上了&#xff0c;通过yum找到服务器上的软件下载 软件操作 yum list 可以显示所有可下载软件&#xff0c;我们要找lrzsz软件 yum install 下载 yum remove 卸载 yum源 yum下载软件是通过下载…
阅读更多...
【Golang】sql.Null* 类型使用（处理空值和零值）

【Golang】sql.Null* 类型使用（处理空值和零值）

sql.NullString 和 sql.NullInt64 类型&#xff08;以及其他类似的 sql.Null* 类型&#xff09;在处理数据库操作时非常有用&#xff0c;尤其是在 Go 语言的 database/sql 包中。它们的主要用途包括&#xff1a; 表示 NULL 值&#xff1a; 在数据库中&#xff0c;NULL 表示“没…
阅读更多...
【昇腾】从单机单卡到单机多卡训练

【昇腾】从单机单卡到单机多卡训练

昇腾&#xff1a;单机单卡训练->单机多卡训练 分布式训练 &#xff08;1&#xff09;单机单卡的训练流程 硬盘读取数据CPU处理数据&#xff0c;将数据组成一个batch传入GPU网络前向传播计算loss网络反向传播计算梯度 &#xff08;2&#xff09;PyTorch中最早的数据并行框…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023