Javascript 重新渲染组件

我是一个新的反应和创建一些演示应用程序的人，我想在登录用户上呈现我的标题组件，但我的应用程序在登录用户时不会重新呈现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

不会在React中触发重新渲染

---

您必须有一个全局存储来保存

用户

数据。

您可以在应用程序组件的状态下维护用户数据，并将更新用户的功能作为道具传递给登录组件，一旦用户登录，调用该功能来更新用户状态。这将导致应用程序组件重新加载并随后更新头组件

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

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
     })

   }
   ....
}

函数应用程序（）{
const[user，setUser]=useState（localStorage.getItem（“用户”）；
返回(
);
}
功能登录（道具）{
...
onUserLogin=（）=>{
//下面是API服务的模拟实现。您可以使用fetch或axios
loginUser（{…您的参数转到这里}）。然后（用户=>{
props.setUser（user）；//这将使用用户状态更新父组件
})
}
....
}

您似乎没有更新用户状态以导致重新呈现应用程序组件。很抱歉，我现在没有使用任何用户状态@shubhamkhattriso，我想当用户登录时，您正在将用户保存到本地存储中，但标题不会用新值更新。对吗？您需要导致重新呈现应用程序组件无论您是否使用用户状态，以便标头在loginyes@GiovanniEsposito之后接收更新的数据，我希望在此userhi@Carlos的基础上使用不同的标头选项。我只熟悉本地存储和会话存储什么是全局存储以及如何将用户数据保存到其中