我想檢查用戶是否在頁面重新加載（F5）時登錄。為此，我在 _app.tsx 檔案中呼叫 useLayoutEffect 掛鉤：
const { authenticated, setAuthenticated } = useContext(AuthContext)
const fetchRefresh = async () => {
const status = await AuthStore.checkAuth()
if (status == 200) {
setAuthenticated && setAuthenticated(true)
} else {
setAuthenticated && setAuthenticated(false)
}
return status
}
useLayoutEffect(() => {
if (localStorage.getItem("access_token")) {
fetchRefresh()
}
}, [])
我的 index.tsx 包裝在一個布局中，我在其中呼叫 useEffect 并從背景關系中檢查用戶狀態：
export const withLayout = <T extends Record<string, unknown> & IAuthContext>(Component: FunctionComponent<T>) => {
return function withLayoutComponent(props: T): JSX.Element {
const { authenticated } = useContext(AuthContext)
const router = useRouter()
useEffect(() => {
if (!authenticated) router.push("/auth/login")
}, [authenticated])
return (
<Layout>
<Component {...props} />
</Layout>
);
};
};
控制臺中的日志順序如下：
- useLayoutEffect(_app.tsx)
- 使用效果（index.tsx）
- 完成fetchRefresh函式
登錄頁面也有一個 useEffect，如果用戶登錄，它會重定向到“/”頁面。所以當我重新加載頁面時，我有一個閃爍和一些我想要擺脫的重定向。
還有一個問題，為什么？
setAuthenticated && setAuthenticated(true)
console.log(authenticated) // print false
uj5u.com熱心網友回復：
第一個原因是技術性的：你不需要等待fetchRefresh(). 它只是運行異步操作并且承諾回傳被忽略，沒有任何依賴/檢查它。
第二個原因，useEffect/useLayoutEffect沒有阻塞渲染，甚至不期望異步操作。所以（甚至）如果你這樣做
useLayoutEffect(() =>
if (localStorage.getItem("access_token")) {
await fetchRefresh()
}
無論如何，第一次渲染仍然會發生，并且使用authenticated == true.
你需要以某種方式改變你的邏輯。要么添加一個布林值isLoading，因此第一次渲染不會顯示任何內容，因為仍在獲取/驗證資料。authenticated或者，您可以使用列舉代替布林值，yes|true|undefined而最后一個值不做/顯示任何事情。或者做點別的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/529581.html
上一篇：Java腳本物件速記
下一篇：如何在回圈中命令Ajax呼叫