登錄 在導航欄中注銷

Question

我希望你還好。

我試圖在用戶登錄時切換到在 Navabar 中注銷，但是當我控制台日志時，我得到 isloggedin false，即使用戶已登錄並且令牌存儲在 localstorage 中。

這是我的代碼：

應用程序.js

 const App = () => { const [isLoggedIn, setLoggedIn] = useState(false) console.log(isLoggedIn) const handleLogin = token => { if (!token) return localStorage.setItem('token', token) setLoggedIn(true) } const handleLogout = () => () => { setLoggedIn(false) localStorage.clear() } return ( <div className="App"> <Router> <Navbar isLoggedIn={isLoggedIn} logout={handleLogout} /> <Switch> <Route exact path='/' component={props => ( <Login {...props} onLogin={handleLogin} /> )}></Route> <Route exact path="/signin" component={Signin}></Route> <Route exact path="/feed" component={Feed}></Route> <Route exact path="/withuser" component={Withuser}></Route> </Switch> </Router> </div> ) } export default App;

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

導航欄.js：

 const TheNavbar = (props) => { console.log(props) return ( <div className="navbar"> <Navbar> <NavbarBrand> <NavLink id="logo" tag={Link} exact to="/"> <img src="/img/logounax.png" alt="image" style={{ width: 150 }} /> </NavLink> </NavbarBrand> <Nav> {props.isLoggedIn ? ( <Nav> <NavLink className="link-pink" tag={Link} exact to="/feed"> Profile </NavLink> <NavLink className="link-pink" tag={Link} exact to="/" onClick={props.logout()}> Logout </NavLink> </Nav> ) : ( <Nav> <NavLink className="link-pink" tag={Link} exact to="/"> Login </NavLink> <NavLink className="link-pink" tag={Link} exact to="/signin"> Signin </NavLink> </Nav> )} </Nav> </Navbar> </div> ) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

任何想法為什么會發生這種情況？

先感謝您。

（帖子已編輯）

Answer 1

我檢查你的代碼有一些問題。 您正在嘗試檢查handleLogin ，它只會在您單擊handleLogin時進行檢查。 如果用戶刷新頁面會發生什么。 如果令牌可用，它將理想地重定向到儀表板頁面。 所以你必須添加useEffect來檢查組件安裝。 基本上你需要在你的App.js組件中添加它。 它只會檢查組件何時第一次安裝，如果令牌可用，它將設置它

useEffect(() => {
    if (localStorage.getItem("token")) {
      setLoggedIn(true);
    }
  }, []);

只需在您的文件中添加此代碼段即可。 如果其他所有事情都正確，它會自動工作。

您仍然沒有添加完整的代碼;-)。 但我認為不需要。 這將解決您的問題

我修改了你的沙箱。 如果要test兩個字段的功能類型test 。 這是演示