ReactJs -渲染问题.为什么我的签出按钮显示刷新后?

Question

谁能帮帮我?我只是想知道，在我从localstorage获取数据用户之后。签出按钮将显示后，我刷新页面。有人能帮帮我吗?谢谢你

代码如下:

import React, { useEffect, useState } from 'react';
import './header.css';
import { Link } from 'react-router-dom';
const Header = () => {
const [token, setToken] = useState(
localStorage.getItem('user')
? JSON.parse(localStorage.getItem('user')).token
: ''
);
const signOuthandler = (e) => {
localStorage.removeItem('user');
setToken();
};
return (
<nav>
<ul>
{!token && (
<>
<li>
<Link to="/login">
<button>Sing in</button>
</Link>
</li>
<li>
<Link to="/register">
<button>Register</button>
</Link>
</li>
</>
)}
{token && (
<>
<li>
<Link onClick={signOuthandler} to="/login">
<button>Sing Out</button>
</Link>
</li>
</>
)}
</ul>
</nav>
);
};
export default Header;

Answer 1

在'useEffect'中更新您的sign out令牌，

useEffect(()=>{
setToken(localStorage.getItem('user')
? JSON.parse(localStorage.getItem('user')).token
: '')
},[localStorage.getItem('user')])