重新渲染组件 ReactJs

Question

I am new to react and creating some demo app I want to render my header component on the login user but somehow my app doesn't re-render the app.js component when I login with the user

here is my app.js

function App() {

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

note: I am saving my user in localStorage when I login into the app, please let me know if you need more info

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. This will cause App component to rerender and subsequently update Header component.

Below is a sample implementation of how you can possible structure and write your code

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 doesn't trigger a re-render in React.

You must have a global store to save the user data.