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

• « 上一篇：【蓝桥杯】第十二届蓝桥杯C++B 组真题
• » 下一篇：Spring底层核心原理