【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.mzph.cn/bicheng/48330.shtml

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

相关文章

网络安全行业最大的敌人是自己

在危机四伏的数字丛林时代,网络安全行业需要跳出资本和市场的博弈陷阱,通过拯救自己来拯救所有人。当然,政府和资本也应该意识到这一点。 在当今这个数字化时代,网络安全的重要性与日俱增。然而,尽管政府和企业不断强调…

【vue+el-table】实现表尾合计行分两行显示,一行显示勾选项之和,一行显示合计,已实现,具体思路解析

效果图: 思路解析: 首先进行了el-table列表的组件封装,很多参数是传进来的。如果是普通的列表,相关参数直接定义就行 1、使用el-table的summary-method处理表尾行 (1)定义summaryIndex用于指定合计在哪一列…

Linux下载网络文档

1. 使用wget 1.1 安装wget sudo apt install wget1.2 下载网页或者文件 wget URL1.3 下载并重命名 wget -O filename URL1.4 下载文件夹 wget -r ftp://server-address.com/directory1.5 下载整个网站 wget -m --convert-links --page-requisites website_address2. 使用…

vue学习笔记(十一)——开发心得(axios的封装、promise细节、vue-router开发中的使用)

1. axios的网络请求的封装 1.1 为什么要封装api? 代码分层,便于以后的修改,无需触碰逻辑页面 目标: 网络请求,不散落在各个逻辑页面里,封装起来方便以后修改 1.2 封装api步骤 ① 在项目 src 下新建目录 utlis &am…

浅谈大模型领域内数据微调的一些个人理解

近期由于连续做了两个大模型相关的项目尝试,发现一些现象,在查阅了多篇论文及圈内大佬的点评之后,个人对大模型领域内数据微调有了更深入的理解,今天简单交流下,个人的一些理解,欢迎资深大佬对其中的不足之…

Go的数据结构与实现【LinkedList】

介绍 所谓链表(Linked List),就是按线性次序排列的一组数据节点。每个节点都是一个对象,它通过一个引用指向对应的数据元素,同时还通过一个引用next指向下一节点。 实现 逻辑方法 我们定义链表的结构体&#xff1a…

VTD学习笔记(一)-启动vtd、基本界面和按钮

写在前面:真快啊,眨眼就毕业上班了,岗位也是做仿真,看来以后就是一直做仿真了,再见了定位~。公司使用的是vtd,看资料是一个很庞大的自动驾驶仿真软件,囊括了车辆动力学到传感器仿真,…

【WPF开发】上位机开发-串口收发

一、引言 在现代工业控制、嵌入式系统等领域,串口通信作为一种常见的通信方式,被广泛应用于各种场景。C#作为一门强大的编程语言,结合Windows Presentation Foundation(WPF)框架,可以轻松实现串口通信功能…

MMDet3d TR3D: RuntimeError: Error compiling objects for extension

项目: https://github.com/open-mmlab/mmdetection3d 问题复现: 步骤 运行python tools/test.py projects/TR3D/configs/tr3d_1xb16_scannet-3d-18class.py checkpoints/tr3d_1xb16_sunrgbd-3d-10class.pth后报错: File "/home/kyle…

vue2高级特性

1、vue父子组件如何通信 通过props和emit事件传递 // 父组件中<Child :data"data" dataChange"dataChangeHandle"></Child>...methods: {dataChangeHandle(data) {...do somthing} } // 子组件中export default {props: {data: {type: Objec…

C++ STL partition_copy 用法和实现

一&#xff1a;功能 对区间内的元素进行分组&#xff0c;将分组结果拷贝到给定序列中。 二&#xff1a;用法 #include <vector> #include <algorithm> #include <iostream>int main() {std::vector<int> data{2, 4, 6, 1, 3, 5};auto is_even [](in…

Python list comprehension (列表推导式 - 列表解析式 - 列表生成式)

Python list comprehension {列表推导式 - 列表解析式 - 列表生成式} 1. Python list comprehension (列表推导式 - 列表解析式 - 列表生成式)2. Example3. ExampleReferences Python 中的列表解析式并不是用来解决全新的问题&#xff0c;只是为解决已有问题提供新的语法。 列…

iPad型号数据解析:了解不同iPad型号的连接和扩展性能力

iPad是一款非常受欢迎的平板电脑&#xff0c;拥有多种型号和规格可供选择。在本篇文章中&#xff0c;我们将深入研究不同iPad型号的连接和扩展性能。数据源来自于挖数据平台&#xff0c;该平台提供了全面的iPad型号数据&#xff0c;共计1485个型号。 首先&#xff0c;让我们来…

【D3.js in Action 3 精译_020】2.6 用 D3 设置与修改元素样式 + 名人专访(Nadieh Bremer)+ 2.7 本章小结

当前内容所在位置 第一部分 D3.js 基础知识 第一章 D3.js 简介&#xff08;已完结&#xff09; 1.1 何为 D3.js&#xff1f;1.2 D3 生态系统——入门须知1.3 数据可视化最佳实践&#xff08;上&#xff09;1.3 数据可视化最佳实践&#xff08;下&#xff09;1.4 本章小结 第二章…

SpringBoot如何使用Kafka来优化接口请求的并发

在Spring Boot中使用 Kafka 来优化接口请求的并发&#xff0c;主要是通过将耗时的任务异步化到Kafka消息队列中来实现。这样&#xff0c;接口可以立即响应客户端&#xff0c;而不需要等待耗时任务完成。 在Spring Boot应用程序中调用Kafka通常涉及使用Spring Kafka库&#xff…

怎样用Java程序与数据库建立联系?

首先我们要了解一下JDBC&#xff0c;一个为Java程序与关系型数据库交互提供便利的API&#xff08;应用程序编程接口&#xff09;&#xff0c; 本期我们尝试用Java编程软件IDEA与MYSQL数据库建立联系。 首先我们在IDEA中穿件一个&#xff08;SQL&#xff09;&#xff0c;然后导…

系统编程--Linux下文件其他操作

这里写目录标题 文件存储理论补充dentry、inode 文件其他操作stat函数作用函数原型代码&#xff08;以获取文件大小为例&#xff09;补充&#xff08;获取文件类型&#xff09; lstat函数作用函数原型代码补充&#xff08;获取文件权限&#xff09;总结 tipslink函数作用简介函…

畅玩游戏新选择 :游戏本 Windows10 64位 专业版!

对于喜欢游戏竞技的玩家而言&#xff0c;选择一款合适的操作系统对于提升游戏体验至关重要。为了满足这一需求&#xff0c;系统之家小编将带来高性能的游戏本专用Win10操作系统。这一版本系统不仅注重游戏的稳定性&#xff0c;还针对玩家在游戏中可能遇到的超时检测和恢复&…

收银系统源码-千呼新零售收银视频介绍

千呼新零售2.0系统是零售行业连锁店一体化收银系统&#xff0c;包括线下收银线上商城连锁店管理ERP管理商品管理供应商管理会员营销等功能为一体&#xff0c;线上线下数据全部打通。 适用于商超、便利店、水果、生鲜、母婴、服装、零食、百货、宠物等连锁店使用。 详细介绍请…

JavaScript 模板字符串:让字符串拼接变得更优雅

在 JavaScript 开发中&#xff0c;字符串拼接是一个常见的需求。从简单的用户界面文本生成到复杂的动态数据格式化&#xff0c;字符串操作无处不在。传统的字符串拼接方法虽然功能强大&#xff0c;但往往显得冗长且难以阅读。为了解决这一问题&#xff0c;ES6&#xff08;ECMAS…