react useState更新异步问题


当我们使用react中useState这个hook时候，如下
const [page, setPage] = useState(1); const handlerClick = (e)=>{ setPage(e.
current); console.log(page); }
当我打印page时候，此时page还是1，因为useState的更新是异步的，这和react的机制有关，要解决这个可以这样做

1.使用useState的返回值
setPage(e.current); setPage(prevFoo => { console.log('page===========',prevFoo)
;//page=========== 2 return prevFoo; });
2.自定义hook（第一种方式）
const useSyncCallback = callback => { const [proxyState, setProxyState] =
useState({ current: false }); const Func = useCallback(() => { setProxyState({
current: true }); }, [proxyState]); useEffect(() => { if (proxyState.current ===
true) { setProxyState({ current: false }); } }, [proxyState]); useEffect(() => {
proxyState.current && callback(); }); return Func; }; const funcqq =
useSyncCallback(() => { console.log('page===========',page);//page=========== 2
}); //调用 setPage(e.current); funcqq()
自定义hook（第二种方式）
function useCurrentValue(value) { const ref = useRef(value); useEffect(() => {
ref.current = value; }, [value]); return ref; } //调用 const log = () => {
setCount(count + 1); setTimeout(() => { console.log(currentCount.current); },
3000); };
3.使用useRef替代useState,第三种方式在自定义hook第二种方式里面已经体现了

4.使用useEffect,在自定义hook第二种方式里面已经体现了

技术
下载桌面版
GitHub
Microsoft Store
SourceForge
Gitee
百度网盘（提取码：draw）
云服务器优惠
华为云优惠券
京东云优惠券
腾讯云优惠券
阿里云优惠券
Vultr优惠券
站点信息
问题反馈
邮箱：[email protected]
吐槽一下
QQ群：766591547
关注微信
©2020-2025 ioDraw All rights reserved, Privacy Policy