所以我有這種問題，有一個 React 背景關系，我在其中管理身份驗證我使用受保護的路由組件在用戶未通過身份驗證時禁用訪問頁面（沒有可用的 localstorage 用戶資料）。
但是這種方法有一個問題，因為在第一次預渲染時用戶是未定義的 ( useState()) 并且只有在 useEffect 運行之后才會獲取用戶資料。
片段代碼：
AuthContextProvider
const [user, setUser] = useState();
const [hydrated, setHydrated] = useState(false); // added to fix the problem
useEffect(() => {
const userLocal = localStorage.getItem('user');
setUser(JSON.parse(userLocal));
setHydrated(true); // added to fix the problem
}, []);
受保護的路線：
if (isBrowser() && !authCtx.user && pathIsProtected) {
router.push('/signin');
}
所以我最終讓 user = undefined 持續了幾分之一秒，足以捕捉到這種情況!authCtx.user，而不是用戶通過了身份驗證。
正如您在代碼中看到的那樣，我的解決方法是使用一個hydrated變數，該變數與本地存盤中的用戶資料一起設定，在提供程式中，我等待水化變數為真，然后再呈現子組件（受保護的路由所在的位置）
return (
<AuthContext.Provider
value={{
error: error,
loading: loading,
user: user
}}
>
{hydrated && children} {/* added to fix the problem */}
</AuthContext.Provider>
);
這樣一切正常，但這是解決此類問題的正確模式嗎？
uj5u.com熱心網友回復：
你可以這樣做，這幾乎是一樣的，但使用user變數而不是hydrated：
const [user, setUser] = useState(false);
在組件中：
...
>
{user && children} {/* added to fix the problem */}
</AuthContext.Provider>
...
這樣你就可以完全放棄const [hydrated, setHydrated] = useState(false);了。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/535535.html
下一篇：如何僅為特定用戶添加費用？