反应本地存储项目

Question

我想在反应中做一种授权，但是当我在一个组件中添加一个令牌时遇到问题，第二个没有看到它，但只有在重新加载应用程序后才能看到它。 如何在反应中纠正这种情况？

import React from 'react';
import {NavLink} from "react-router-dom";
const Login = () => {
 const handleLogin = () => {
      console.log( localStorage.getItem('token'));
      localStorage.setItem('token', 'token');
 }




 return (
      <div>
           <header className="">
                <ul>
                     <li><NavLink to="/main" activeClassName={'active-link'}>Home</NavLink></li>
                </ul>
           </header>
           <button onClick={handleLogin}>login</button>
      </div>
 );
 };

    export default Login;

App.js

import './App.css';
import React from 'react';
import {Route,Redirect,Switch} from 'react-router-dom'
import Login from "./pages/login";
import Logout from "./pages/logout";
import Main from "./pages/main";
import ErrorPage from "./pages/error";

function App() {


  return (
    <div className="App">
      <div>ore</div>
      <Switch>
           <Route exact path="/">
                <Redirect to="/login" />
           </Route>
           {
                localStorage.getItem('token') ?  <Route path="/main"  component={Main} /> : null
           }
           <Route path="/login"  component={Login} />
           <Route path="/portfolio"  component={Logout} />
           <Route path="/error" exact component={ErrorPage} />
           <Redirect to={'/error'}  />

      </Switch>
    </div>
  );
}

export default App;

Answer 1

你可以在你的 app.js 中使用 useEffect 和 useState

  const [token, setToken] = useState([]);
  const tokenFromLogin = localStorage.getItem("token");

  useEffect(() => {
    setToken(tokenFromLogin);
  }, [jwt]);