重新渲染组件 ReactJs

Question

我是新来的反应和创建一些演示应用程序我想在登录用户上呈现我的 header 组件但不知何故当我与用户一起登录时我的应用程序不会重新呈现 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 中，如果您需要更多信息，请告诉我

Answer 1

You can maintain the user data in state of App component and pass on the function to update user as props to the login component, once the user is logged in, call the function to update the user state. 这将导致 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
     })

   }
   ....
}

Answer 2

localStorage不会触发 React 中的重新渲染。

您必须有一个全局存储来保存user数据。