重新渲染组件ReactJs

Question

我刚开始反应并创建一些演示应用程序，我想在登录用户上呈现我的头组件，但不知何故，当我使用用户登录时，我的应用程序没有重新呈现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

您可以在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数据。