【safari】react在safari浏览器中,遇到异步时间差的问题,导致状态没有及时更新到state,引起传参错误。如何解决

在safari浏览器中,可能会遇到异步时间差的问题,导致状态没有及时更新到state,引起传参错误。

PS:由于useState是一个普通的函数, 定义为() => void;因此此处不能用await/async替代setTimeout,只能用在返回值为Promise时

有问题的代码:

我们可以看到,setTimeout只传0,这个时候在谷歌浏览器是有效果的,能确保顺序正确,但是在safari浏览器下,obj的值没有办法及时更新上state。

const columnsChange = ({ key, val }: { key: string | number; val: any }) => {const obj = {[key]: Array.isArray(val) && val?.length > 0 ? val : undefined};setFilters((f) => ({ ...f, ...obj }));setPagination({ pageNo: 1, pageSize: PAGE_SIZE });setTimeout(() => {run();}, 0);};

修改后的代码:

于是,我们尝试使用await/async去处理异步,但是由于setState是一个普通的函数, 定义为() => void;因此此处不能用await/async替代setTimeout,只能用在返回值为Promise时。因此不能这样做!

const columnsChange = async ({ key, val }: { key: string | number; val: any }) => {const obj = {[key]: Array.isArray(val) && val?.length > 0 ? val : undefined};// 由于setState是一个普通的函数, 定义为() => void;因此此处不能用await/async替代setTimeout,只能用在返回值为Promise时await setFilters((f) => ({ ...f, ...obj }));setPagination({ pageNo: 1, pageSize: PAGE_SIZE });run();};
验证:我们通过查看useState的定义,查看Dispatch、SetStateAction的定义,可以看到都是() => void或者返回泛型S(这意味着如果我们要变更的状态不是promise,也不适用await写法)

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

正确的代码:

将异步时间微调大一些200ms

const columnsChange = ({ key, val }: { key: string | number; val: any }) => {const obj = {[key]: Array.isArray(val) && val?.length > 0 ? val : undefined};// 由于setState是一个普通的函数, 定义为() => void;因此此处不能用await/async替代setTimeout,只能用在返回值为Promise时setFilters((f) => ({ ...f, ...obj }));setPagination({ pageNo: 1, pageSize: PAGE_SIZE });setTimeout(() => {run();}, 200);};

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

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

相关文章

自动驾驶---视觉Transformer的应用

1 背景 在过去的几年,随着自动驾驶技术的不断发展,神经网络逐渐进入人们的视野。Transformer的应用也越来越广泛,逐步走向自动驾驶技术的前沿。笔者也在博客《人工智能---什么是Transformer?》中大概介绍了Transformer的一些内容&#xff1a…

el-image 使用静态资源,通过遍历展示多图

关键代码&#xff1a;&#xff08;通过v-for 遍历获取&#xff09; <div v-for"item in projectCase" :key"item.id" class"block" click"aa(item)" :iditem.className><el-image :srcitem.url:fit"fit":preview-…

go-kratos 学习笔记(2) 创建api

proto 声明SayHi 先删除go.mod 从新初始化一下 go mod init xgs_kratosgo mod tidy 编辑 api/helloword/v1/greeter.proto 新声明一个方法 rpc SayHi (HelloHiRequest) returns (HelloHiReply) {option (google.api.http) {post: "/hi"body: "*"};} …

【Godot4.2】GodotXML插件 - 解析和生成XML

概述 近期在研究Godot的XML和SVG解析&#xff0c;Godot提供了XMLParser类型&#xff0c;但本身只提供了低级的XML解析接口和功能&#xff0c;想要完成完整的XML文档解析和存储可能还需要在其基础上编写类或功能&#xff0c;就像我在昨天&#xff08;2024年7月20日&#xff09;…

六边形动态特效404单页HTML源码

源码介绍 动态悬浮的六边形,旁边404文字以及跳转按钮,整体看着像科技二次元画风,页面简约美观,可以做网站错误页或者丢失页面,将下面的代码放到空白的HTML里面,然后上传到服务器里面,设置好重定向即可 效果预览 完整源码 <!DOCTYPE html> <html><head…

CH04_依赖项属性

第4章&#xff1a;依赖项属性 本章目标 理解依赖项属性理解属性验证 依赖项属性 ​ 属性与事件是.NET抽象模型的核心部分。WPF使用了更高级的依赖项属性&#xff08;Dependency Property&#xff09;功能来替换原来.NET的属性&#xff0c;实现了更高效率的保存机制&#xf…

python实现责任链模式

把多个处理方法串成一个list。下一个list的节点是上一个list的属性。 每个节点都有判断是否能处理当前数据的方法。能处理&#xff0c;则直接处理&#xff0c;不能处理则调用下一个节点&#xff08;也就是当前节点的属性&#xff09;来进行处理。 Python 实现责任链模式&#…

【QAC】Dashboard服务端如何配置

【更多软件使用问题请点击亿道电子官方网站】 1、 文档目标 解决Dashboard服务端如何配置的问题。 2、 问题场景 客户想使用Dashboard&#xff0c;Dashboard服务端如何配置。 3、软硬件环境 1、软件版本&#xff1a;HelixQAC23.04 2、机器环境&#xff1a;Windows 64bit 3…

HarmonyOS鸿蒙应用开发-ZRouter让系统路由表变得更简单

介绍 ZRouter是基于Navigation系统路由表和Hvigor插件实现的动态路由方案。 系统路由表是API 12起开始支持的&#xff0c;可以帮助我们实现动态路由的功能&#xff0c;其目的是为了解决多个业务模块&#xff08;HAR/HSP&#xff09;之间解耦问题&#xff0c;从而实现业务的复…

数据结构~~顺序表

目录 一、顺序表的概念 二、顺序表的接口实现 1.顺序表初始化 2.顺序表销毁 3.检查空间并扩容 4.顺序表尾插、顺序表头插 5.顺序表尾删、顺序表头删 6.顺序表查找 7.顺序表在pos位置插入x、删除pos位置的值 三、完整代码 四、总结 一、顺序表的概念 顺序表是用一…

逆向案例二十八——某高考志愿网异步请求头参数加密,以及webpack

网址&#xff1a;aHR0cDovL3d3dy54aW5nYW9rYW90Yi5jb20vY29sbGVnZXMvc2VhcmNo 抓包分析&#xff0c;发现请求头有参数u-sign是加密的&#xff0c;载荷没有进行加密&#xff0c;直接跟栈分析。 进入第二个栈&#xff0c;打上断点&#xff0c;分析有没有加密位置。 可以看到参数…

Python爬虫实战 | 爬取携程网景区评论|美食推荐|景点列表数据

本文采用Selenium库爬取携程网的景区评论。 携程接口接入 Selenium介绍 Selenium是一个Web的自动化测试工具&#xff0c;可以按指定的命令自动操作&#xff0c;如让浏览器加载页面、获取数据、页面截屏等。Selenium本身不自带浏览器&#xff0c;需要与第三方浏览器结合才能使…

面试官问:Django、Flask、FastAPI,你选哪个?为什么?

如果你是python Web方向的开发工程师&#xff0c;那么在面试中&#xff0c;会经常遇到面试官问这个问题&#xff1a; “在Python的三个流行Web框架&#xff1a;Django、Flask和FastAPI&#xff0c;说说它们的异同&#xff0c;以及你是怎么选择合适的框架&#xff1f;” 异同对…

基于SSM的高考志愿选择辅助系统

基于SSM的高考志愿选择辅助系统的设计与实现~ 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringSpringMVCMyBatis工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 前台 前台首页 院校展示 后台 后台首页 学校管理 摘要 随着高考制度的不断完…

python-爬虫实例(4):获取b站的章若楠的视频

目录 前言 道路千万条&#xff0c;安全第一条 爬虫不谨慎&#xff0c;亲人两行泪 获取b站的章若楠的视频 一、话不多说&#xff0c;先上代码 二、爬虫四步走 1.UA伪装 2.获取url 3.发送请求 4.获取响应数据进行解析并保存 总结 前言 道路千万条&#xff0c;安全第一条 爬…

成为CMake砖家(4): VSCode中的CMake语法高亮

大家好&#xff0c;我是白鱼。 在成为CMake砖家的路上&#xff0c;我的主力 IDE/编辑器是 VSCode。 VSCode 免费、插件丰富、文档完善&#xff0c; 相比于 CLion 的年费几百上千元的license真的很香。 不过&#xff0c; 工欲善其事必先利其器&#xff0c; VSCode 需要安装合适…

FastDFS分布式存储

一&#xff1a;FastDFS原理 FastDFS是一个开源的轻量级分布式文件系统&#xff0c;功能包括&#xff1a;文件存储&#xff0c;文件同步&#xff0c;文件访问&#xff08;文件上传、文件下载&#xff09;等&#xff0c;解决了大容量存储和负载均衡的问题。 1&#xff1a;FastD…

物联网在电力行业的应用

作者主页: 知孤云出岫 这里写目录标题 作者主页:物联网在电力行业的应用简介主要应用领域代码案例分析1. 智能电表数据采集和分析2. 设备监控和预测性维护3. 能耗管理和优化4. 电力负载预测5. 分布式能源管理6. 电动汽车充电管理7. 电网安全与故障检测 物联网在电力行业的应用…

CH03_布局

第3章&#xff1a;布局 本章目标 理解布局的原则理解布局的过程理解布局的容器掌握各类布局容器的运用 理解 WPF 中的布局 WPF 布局原则 ​ WPF 窗口只能包含单个元素。为在WPF 窗口中放置多个元素并创建更贴近实用的用户男面&#xff0c;需要在窗口上放置一个容器&#x…

海康威视综合安防管理平台 detection 前台RCE漏洞复现

0x01 产品简介 海康威视综合安防管理平台是一套“集成化”、“智能化”的平台,通过接入视频监控、一卡通、停车场、报警检测等系统的设备。海康威视集成化综合管理软件平台,可以对接入的视频监控点集中管理,实现统一部署、统一配置、统一管理和统一调度。 0x02 漏洞概述 海康…