三元不更新 React 中的视图

Question

我有一个相当简单的 NavBar 组件，我希望它根据您是否登录显示不同的按钮。它在您第一次加载页面但未登录时工作。当您正确登录时，它会更新视图。但是，当您注销时，视图不会更新，您会继续看到truthy 分支中的按钮。注销功能实际上是从 localStorage 中删除令牌 - 视图只是没有更新。有什么建议吗？

import React from 'react';
import { NavLink } from 'react-router-dom';
import '../App.css';

function Navigation() {
    const logout = function () {
        localStorage.removeItem('username');
        localStorage.removeItem('token');
    };

    return (
        <>
            {localStorage.getItem('token') ? (
                <div className='nav'>
                    <NavLink to='/' className='link'>
                        Home
                    </NavLink>
                    <NavLink to='/login' className='link' onClick={logout}>
                        Log Out
                    </NavLink>
                </div>
            ) : (
                <div className='nav'>
                    <NavLink to='/register' className='link'>
                        {' '}
                        Register{' '}
                    </NavLink>
                    <NavLink to='/login' className='link'>
                        Log In
                    </NavLink>
                </div>
            )}
        </>
    );
}
export default Navigation;

Answer 1

你必须以某种方式重新渲染，我可能会这样做：

import { NavLink } from 'react-router-dom'
import '../App.css';

function Navigation () {
    const [loggedIn, setLoggedIn] = React.useState(!!localStorage.getItem('token'))
    const logout = function(){
        localStorage.removeItem('username')
        localStorage.removeItem('token')
        setLoggedIn(false);
    }

    return (
        <>
        {loggedIn
        ? (<div className='nav'><NavLink to='/' className='link'>Home</NavLink> <NavLink to='/login' className='link' onClick={logout}>Log Out</NavLink></div>)
        : (<div className='nav'> <NavLink to='/register' className='link'>Register</NavLink> <NavLink to='/login' className='link'>Log In</NavLink></div>)
        }
        </>
    )

}
export default Navigation