React sessionStorage 不同步组件

Question

你好，我目前正在处理sessionStorage和呈现组件。当用户登录时，sessionStorage存储用户的id，以使会话持久持续，除非用户注销。然后，它重定向到/并渲染App.js组件。

如果用户登录，则App.js应使用注销文本呈现Header组件。但它呈现注册文本和登录文本，尽管存在sessionStorage.loginId.

只有当我重新加载页面时，登出文本才会出现在页眉中。我应该做些什么来确保不需要以被动的方式重新加载以显示注销文本？

我的App.js代码在下面。

import Form from './components/form';
import Comments from './components/comments';
import Header from './components/header';
import Signup from './components/signup';
import Login from './components/login';
import Logout from './components/logout';
import { useState } from 'react';
import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';
import './styles/app.scss';
function App() {
const [ text, stateText ] = useState('');
const [ user, stateUser ] = useState({});
let sessionStorage = window.sessionStorage;
return (
<div className="App">
<BrowserRouter>
<Header sessionStorage={sessionStorage} />
<Routes>
<Route path="/comments" element={<Comments text={text} />} />
<Route path="/signup" element={<Signup />} />
<Route
path={sessionStorage.loginId ? '/logout ' : '/login'}
element={sessionStorage.loginId ? <Logout /> : <Login sessionStorage={sessionStorage} />}
/>
<Route
path="/"
element={<Form text={text} stateText={stateText} user={user} stateUser={stateUser} />}
/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;

我在这里保存了一个使用会话存储的用户id：

import { useRef } from 'react';
import { Redirect, Route, useNavigate } from 'react-router-dom';
import axios from 'axios';
const Login = ({ sessionStorage }) => {
const emailRef = useRef(null);
const pwRef = useRef(null);
const navigate = useNavigate();
const login_submit = async (e) => {
e.preventDefault();
const data = {
email: emailRef.current.value,
password: pwRef.current.value
};
axios
.post('/api/login', data)
.then(function(res) {
console.log(res.data);
sessionStorage.setItem('loginId', res.data.user_id);
navigate('/');
})
.catch(function(error) {
console.log('aaaaa');
console.log(error.response.data);
});
};
return (
<div>
<form method="post">
<input type="email" name="email" placeholder="email" ref={emailRef} />
<input type="password" name="password" placeholder="password" ref={pwRef} />
<input type="submit" onClick={login_submit} />
</form>
</div>
);
};
export default Login;

最后，标题组件在这里：

import { BrowserRouter, Routes, Route, Router, Link } from 'react-router-dom';
const Header = ({ sessionStorage }) => {
return (
<div className="header_component">
{
sessionStorage.loginId? <Link to="/logout">Logout</Link>:
<>
<Link to="/signup">Signup</Link>
<Link to="/login">Login</Link>
</>
}
</div>
);
};
export default Header;

Answer 1

会话存储值需要使用getter方法访问，而不是作为storage对象的属性访问。

因此，在App.js和Header组件中，需要使用sessionStorage.getItem('loginId')而不是sessionStorage.loginId。