【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);
    };
相关推荐
耶啵奶膘1 小时前
uniapp-是否删除
linux·前端·uni-app
王哈哈^_^2 小时前
【数据集】【YOLO】【目标检测】交通事故识别数据集 8939 张,YOLO道路事故目标检测实战训练教程!
前端·人工智能·深度学习·yolo·目标检测·计算机视觉·pyqt
cs_dn_Jie3 小时前
钉钉 H5 微应用 手机端调试
前端·javascript·vue.js·vue·钉钉
开心工作室_kaic3 小时前
ssm068海鲜自助餐厅系统+vue(论文+源码)_kaic
前端·javascript·vue.js
有梦想的刺儿4 小时前
webWorker基本用法
前端·javascript·vue.js
cy玩具4 小时前
点击评论详情,跳到评论页面,携带对象参数写法:
前端
qq_390161775 小时前
防抖函数--应用场景及示例
前端·javascript
John.liu_Test5 小时前
js下载excel示例demo
前端·javascript·excel
Yaml45 小时前
智能化健身房管理:Spring Boot与Vue的创新解决方案
前端·spring boot·后端·mysql·vue·健身房管理
PleaSure乐事6 小时前
【React.js】AntDesignPro左侧菜单栏栏目名称不显示的解决方案
前端·javascript·react.js·前端框架·webstorm·antdesignpro