Question

我有一个简单的React App。我定义了几个路由，其中之一是Login。用户成功登录“登录”组件后，我想在顶部菜单中显示其用户名。我正在使用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（）方法的Login组件中，我只是将用户名添加到localStorage：

 localStorage.setItem("username", username);

仅更新App组件中的显示值还不够吗？

Answer 1

您可以使用Context API，并将本地存储中的所有数据也存储在应用程序状态中，因此，无论何时更新本地存储，请确保更新应用程序的状态，React将检测到应用程序状态的变化，并且将触发render生命周期。

请参阅此处有关如何使用Context API的文档，该文档非常易于实现，也可以与localstorage一起使用，您可以使用此软件包ngx-webstorage，在此处可以找到更多信息https://www.npmjs.com/package/ngx-webstorage

Answer 2

一种实现方法是在应用程序组件状态下存储用户名，并在应用程序组件中创建一个函数，该功能更新状态下的用户名并将该函数作为回调传递给登录组件。登录成功后，登录页面将调用此函数并更新应用程序组件中的用户名。由于状态已更改，因此将以新状态（更新的用户名）再次呈现该应用程序组件。

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在登录组件中使用。登录成功后，可以调用此函数以更新应用程序组件中的状态。

Answer 3

当状态或道具的值更改时，重新渲染。您需要将从localStorage获得的值存储到App组件中的状态。

由于这看起来像一个应用程序，需要在许多组件之间共享数据，而这些组件不一定是父子关系，因此使用 Redux 是个好主意。

localStorage值不会自动更新

3 个答案: