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

server/2024/10/21 17:12:21/

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.ppmy.cn/server/65244.html

相关文章

前端-04-VScode敲击键盘有键入音效,怎么关闭

目录 问题解决办法 问题 今天正在VScode敲项目,不知道是按了什么快捷键还是什么的,敲击键盘有声音,超级烦人啊!!于是我上网查了一下,应该是开启了VScode的键入音效,下面是关闭键入音效的办法。…

react 快速入门思维导图

在掌握了react中一下的几个步骤和语法,基本上就可以熟练的使用react了。 1、组件的使用。react创建组件主要是类组件和函数式组件,类组件有生命周期,而函数式组件没有。 2、jsx语法。react主要使用jsx语法,需要使用babel和webpa…

鸿蒙笔记--动画

这一节主要了解一下鸿蒙的动画,动画的引入主要是为了提升用户体验、增加用户反馈和互动感、引导用户操作以及缓解等待带来的不适感。 属性动画: Index.ets Entry Component struct Index {StatewidthSize: number 100StateheightSize: number 40build() {Column…

JVM--双亲委派模型

1.双亲委派模型 定义: 站在Java虚拟机的角度来看,只存在两种不同的类加载器:一种是启动类加载器(Bootstrap ClassLoader),这个类加载器使用C语言实现,是虚拟机自身的一部分;另外一种…

Harmony 状态管理 @Local 和 @Param

Harmony 状态管理 Local 和 Param Local 背景 Local 是harmony应用开发中的v2版本中 对标**State**的状态管理修饰器,它解决了 State 对状态变量更改的检测混乱的问题: State 修饰的状态变量 可以是组件内部自己定义的State 修饰的状态 也可以由外部父…

JDK新特性(Lambda表达式,Stream流)

Lambda表达式: Lambda 表达式背后的思想是函数式编程(Functional Programming)思想。在传统的面向对象编程中,程序主要由对象和对象之间的交互(方法调用)构成;而在函数式编程中,重点…

河南萌新联赛2024第(一)场:河南农业大学 A D F G H I K

A 造数 题目描述: 给定一个整数 𝑛 ,你可以进行以下三种操作 操作1: 1 操作2; 2 操作3: 2 问最少需要多少次操作可以将 0 转为为 𝑛 。 解题思路 操作1,2,3。操作 3 …

C++入门基础

目录 一、命名空间 1.命名空间的作用 2.命名空间的定义 3.命名空间的使用 二、输入输出 1.输出运算符<< 2.输入运算符>> 三、缺省参数 四、函数重载 五、引用 1.引用简介 2.引用的注意事项 3.const引用 4.引用与指针的关系 六、inline 一、命名空间 …