javascript - 三元不更新 React 中的 View

Question

我有这个相当简单的 NavBar 组件，我希望它根据您是否登录显示不同的按钮。它在您首次加载页面且未登录时起作用。当您适当登录时，它会更新 View 。但是，当您注销时， View 不会更新，您会继续看到 truthy 分支中的按钮。注销功能实际上是从 localStorage 中删除 token —— View 只是没有更新。有什么建议吗？

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