当我们使用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第二种方式里面已经体现了

技术
今日推荐
阅读数 170189
阅读数 23
阅读数 5
阅读数 0
下载桌面版
GitHub
百度网盘(提取码:draw)
Gitee
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信