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

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

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

有问题的代码:

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

typescript 复制代码
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时。因此不能这样做!

typescript 复制代码
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

typescript 复制代码
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);
    };
相关推荐
霍先生的虚拟宇宙网络8 分钟前
webp 网页如何录屏?
开发语言·前端·javascript
jessezappy28 分钟前
jQuery-Word-Export 使用记录及完整修正文件下载 jquery.wordexport.js
前端·word·jquery·filesaver·word-export
旧林8431 小时前
第八章 利用CSS制作导航菜单
前端·css
yngsqq1 小时前
c#使用高版本8.0步骤
java·前端·c#
Myli_ing2 小时前
考研倒计时-配色+1
前端·javascript·考研
余道各努力,千里自同风2 小时前
前端 vue 如何区分开发环境
前端·javascript·vue.js
软件小伟2 小时前
Vue3+element-plus 实现中英文切换(Vue-i18n组件的使用)
前端·javascript·vue.js
醉の虾2 小时前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧2 小时前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm3 小时前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j