重新渲染组件 ReactJs答案

【问题标题】：Re-render component ReactJs重新渲染组件 ReactJs
【发布时间】：2026-01-28 21:45:02
【问题描述】：

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

【问题讨论】：

您似乎没有在更新用户状态以导致重新呈现 App 组件。
对不起，我现在没有使用任何用户状态@ShubhamKhatri
所以我想当用户登录时，您正在将用户保存到 localStorage 但标题不会更新为正确的新值？
无论是否使用用户状态，都需要重新渲染App组件，以便Header在登录后获取更新的数据
是的@GiovanniEsposito 我想根据这个用户使用不同的标题选项

标签： javascript reactjs react-redux react-router

【解决方案1】：

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

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

【讨论】：

嗨 @Carlos 我只熟悉 localStorage 和 sessionStorage 什么是全局存储以及如何将用户数据保存到其中

【解决方案2】：

您可以在App组件的状态中维护用户数据，并将更新用户的函数作为道具传递给登录组件，一旦用户登录，调用该函数更新用户状态。这将导致 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
     })

   }
   ....
}

【讨论】：