所以我有Dashboard應該顯示currentUsers資訊的組件。我把我的currentUserin global context/state.
問題是當Dashboard組件第一次呈現時currentUser，null即使用戶實際上已登錄。因此，我null在第 14 行收到錯誤，或者如果我評論儀表板指出第 22 行的 if 陳述句將會發生，即使用戶已登錄，它也會重定向我在。
有沒有辦法等待isLoggedInFunction完成然后在Dashboard組件中執行邏輯？
在 App.js 中
export const CurrentUserContext = React.createContext(null); // Global Context
const [currentUser, setCurrentUser] = useState(null); // Global State
// Setting current user
useEffect(() => {
setCurrentUser(isLoggedIn()).catch(err => console.log(err));
}, []);
// IsLoggedIn Method
export function isLoggedIn() {
return localStorage.getItem('user') === null ?
null :
JSON.parse(localStorage.getItem('user'));
}
<CurrentUserContext.Provider value={{ currentUser, setCurrentUser }}> // Provider
uj5u.com熱心網友回復：
您可以為用戶設定默認值以避免第一個錯誤。
在這種情況下，您可以Dashboard像這樣更改：
/* ... */
const {
currentUser = {
isLoggedIn: false,
firstName: 'first name'
}
} = useContext(CurrentUserContext);
const [firstName, setFirstName] = useState(currentUser.firstName);
/* ... */
if (!currentUser.isLoggedIn) {
return <Redirect to={'/login'}/>;
}
/* ... */
要解決第二個問題，您需要檢查您的授權后是否localStorage確實包含該user欄位。
uj5u.com熱心網友回復：
我通過這樣做解決了這兩個問題。
const [currentUser, setCurrentUser] = useState(null); // Replaced this line with next line
const [currentUser, setCurrentUser] = useState(() => isLoggedIn());
我洗掉了 useEffect 因為我不再需要它了。
// Setting current user
useEffect(() => {
setCurrentUser(isLoggedIn()).catch(err => console.log(err));
}, []);
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/318776.html
上一篇：為什么同步控制臺MainMethod掛起呼叫異步方法？[復制]
下一篇：Dart可選引數為空型別