时间戳

首页 > 解决方案 > 重新渲染组件 ReactJs

javascript - 重新渲染组件 ReactJs

问题描述

我是新来的反应和创建一些演示应用程序我想在登录用户上呈现我的标题组件但是当我使用用户登录时我的应用程序不会重新呈现 app.js 组件

这是我的 app.js

function App() {

  return (
    <div className="app">
      <Router>
        <Header user={localStorage.getItem("user")} />
        <Switch>
          <Route path="/login">
            <LoginPage />
          </Route>
       </Switch>
    </Router>
  </div>
  );
}

注意：当我登录应用程序时，我正在将我的用户保存在 localStorage 中，如果您需要更多信息，请告诉我

标签： javascriptreactjsreact-reduxreact-router

解决方案

您可以在 App 组件的 state 中维护用户数据，并将更新用户的函数作为 props 传递给登录组件，一旦用户登录，调用该函数更新用户状态。这将导致 App 组件重新渲染并随后更新 Header 组件。

以下是如何构建和编写代码的示例实现

function App() {
  const [user, setUser] = useState(localStorage.getItem("user"));
  return (
    <div className="app">
      <Router>
        <Header user={user} />
        <Switch>
          <Route path="/login">
            <LoginPage setUser={setUser}/>
          </Route>
       </Switch>
    </Router>
  </div>
  );
}

function Login(props) {
   ...
   onUserLogin=() => {
     // Below is a mock implementation of a API service. You can use fetch or axios 
     Api.loginUser({...you params go here}).then(user => {
         props.setUser(user); // This updates the parent component with user state
     })

   }
   ....
}

推荐阅读