javascript - localStorage 值不会自动更新

Question

我有一个简单的 React 应用程序。我定义了几个路由，其中​​之一是登录。用户在登录组件中成功登录后，我想在顶部菜单中显示他的用户名。我正在使用 localStorage 来存储值，我希望它会在值更改时自动更新。但是，我需要刷新页面才能看到更改。我错过了什么？

这是主要 App 组件的代码:

import React, { Component } from 'react';
import {
BrowserRouter as Router,
      Route,
      Link,
      Redirect
    } from 'react-router-dom';

    import Login from './Login.js'
    import Register from './Register.js'
    import About from './About.js'

    class App extends Component {

      render() {
        return (
          <Router>
            <div className="topMenu">
              <Link to="/">Login</Link>
              <span> </span>
              <Link to="/register">Register</Link>
              <span> </span>
              <Link to="/about">About</Link>
              <span> </span>

              <span>Logged in user: {localStorage.getItem("username")}</span>
            </div>

            <div className="container">
              <Route exact path="/" component={Login}/>
              <Route path="/register" component={Register}/>
              <Route path="/about" component={About}/>
            </div>
          </Router>
        );
      }

    }

    export default App;

在 login() 方法的登录组件中，我只是将用户名添加到 localStorage:

 localStorage.setItem("username", username);

更新 App 组件中的显示值不应该吗？

Answer 1

这样做的一种方法是将用户名存储在应用程序组件的状态中，并在应用程序组件中创建一个函数来更新状态中的用户名，并将该函数作为回调传递给登录组件。登录成功后，登录页面会调用该函数，更新app组件中的用户名。由于状态已更改，应用程序组件将以新状态(更新后的用户名)再次呈现。

import React, { Component } from 'react';
import {
BrowserRouter as Router,
  Route,
  Link,
  Redirect
} from 'react-router-dom';

import Login from './Login.js'
import Register from './Register.js'
import About from './About.js'

class App extends Component {
  state = { username: "" };

  updateUsername = () => {
    const username = localStorage.getItem("username");
    this.setState({ username: username });
  };

  render() {
    return (
      <Router>
        <div className="topMenu">
          <Link to="/">Login</Link>
          <span> </span>
          <Link to="/register">Register</Link>
          <span> </span>
          <Link to="/about">About</Link>
          <span> </span>

          <span>Logged in user: {localStorage.getItem("username")}</span>
        </div>

        <div className="container">
          <Route
            path="/login"
            render={props => <Login {...props} updateUsername={updateUsername} />}
           />
          <Route path="/register" component={Register}/>
          <Route path="/about" component={About}/>
        </div>
      </Router>
    );
  }

}

export default App;

现在 updateUsername 函数应该可以通过 this.props.updateUsername 在 Login 组件中使用。您可以在登录成功后调用此函数来更新应用组件中的状态。