条件导航栏链接“聊天”和“注销”仅在刷新后显示

Question

我为反应应用程序构建了一个条件导航栏。登录后，如果有 JWT 令牌，它应该立即显示 Chat navlink 和 Logout navlink。但是，它仅在刷新时显示它们。为什么会这样，我该如何解决？

我使用 JWT 对象作为授权。

Navbar.js

import React, {Component} from 'react';
import {Navbar, Nav} from 'react-bootstrap';
import {Link} from 'react-router-dom';
import Logo from '../../logo/blacklogo.png';
import Logout from '../logoutNavLink/logout';
import getJwt from '../../utils/getJwt';
import '../navbar/style.css'

const jwt = getJwt();

class Navigation extends Component {
    state = {
       isAuthenticated: jwt
    }

    render() {

        return (
          <Navbar bg="light" expand="sm">
             <Navbar.Brand href="/">
               <img
                  src={Logo}
                  className="d-inline-block align-top"
                  alt="Soundbudz logo"
               />
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav">

              {this.state.isAuthenticated ? (
                <Nav className="ml-auto">
                 <Link to="/chat">Chat</Link>
                 <Logout to="/">Logout</Logout>
                </Nav> 
              ):(
                <Nav className="ml-auto">
                 <Link to="/registration">Registration</Link>
                 <Link to="/login">Login</Link>
                </Nav>
             )}

            </Navbar.Collapse>
           </Navbar>
     )}
}

export default Navigation;

Answer 1

您首先需要将“isAuthenticated”设置为 null 并将 jwt 作为道具发送到导航组件，然后创建一个函数，在该函数中检查 jwt 是否存在，如果存在则更改 isAuthenticated 的状态，以这种方式在条件你的回报会起作用