localStorage值不會自動更新

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

當狀態或屬性值更改時，React重新渲染。 您需要將從localStorage獲得的值存儲到App組件中的狀態。

由於這看起來像一個應用程序，需要在許多組件之間共享數據，而這些組件不一定是父子關系，因此使用Redux可能是個好主意。