Javascript 在注销时更新导航栏

我正在尝试在注销时更新导航栏，以下是我编写的代码：

App.js：

class App extends Component {
  constructor(props){
    super(props);
    this.state = {};  
    this.handleLogout = this.handleLogout.bind(this); 
  }

  handleLogout(){
    sessionStorage.clear(); 
    this.setState({loggedIn: false});
  }

  componentWillMount(){
      if(sessionStorage.getItem('access_token') != null && sessionStorage.getItem('id_token') != null){
          this.setState({loggedIn: true}); 
      }
      else{
          this.setState({loggedIn: false}); 
      } 
  }
  render() {
    return (
        <BrowserRouter>
          <div>
            <title>Webshop</title> 
            <NavBar loggedIn={this.state.loggedIn} />
            <Switch>
                    {/*Routes need to be include in App.js otherwise root can't find the paths*/}
                    <Route exact path='/' component={Home}/>
                    <Route exact path='/categories' component={Categories}/>
                    <Route exact path='/login' component={Login}/>
                    <Route exact path='/register' component={Register}/>
                    {(this.state.loggedIn) ? 
                    <Route exact path='/logout' render={(props) => (<Logout logOutHandler={this.handleLogout} {...props}/>)} /> 
                    : null}
                    <Route render={function(){
                        return (<NotFound/>); 
                    }}/>
                </Switch>
              <Footer/>
          </div>  
        </BrowserRouter>
    );
  }
}

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.state={}；
this.handleLogout=this.handleLogout.bind（this）；
}
handleLogout（）{
sessionStorage.clear（）；
this.setState（{loggedIn:false}）；
}
组件willmount（）{
if（sessionStorage.getItem（'access\u token'）！=null和&sessionStorage.getItem（'id\u token'）！=null）{
this.setState（{loggedIn:true}）；
}
否则{
this.setState（{loggedIn:false}）；
} 
}
render（）{
返回(
网店
{/*路由需要包含在App.js中，否则root无法找到路径*/}
{（this.state.loggedIn）？
()} /> 
：null}
);
}
}

NavBar.js：

class NavBar extends Component {
    constructor(props) {
        super(props);
        this.loggedIn = this.props.loggedIn; 
        this.toggle = this.toggle.bind(this);
        this.state = {
          isOpen: false
        }; 
    }

    toggle() {
        this.setState({
          isOpen: !this.state.isOpen
        });
    }

    render(){
        return(
            <div>
                <link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'/>
                <Navbar color="faded" light expand="md">
                    <NavLink className='navbar-brand' exact to='/'>
                        <img src={logo} alt='Brand' width='35px' height='35px'/>
                    </NavLink>
                    <NavbarToggler onClick={this.toggle} />
                    <Collapse isOpen={this.state.isOpen} navbar>
                        <Nav className="mr-auto" navbar>
                            <NavItem>
                                <NavLink className='nav-link' exact to='/categories'>
                                    Categories
                                </NavLink>
                            </NavItem>
                        </Nav>
                        <Nav className='mx-auto' navbar>
                            <Form inline>
                                <FormGroup>
                                    <Input size='sm' type="text" name="search" placeholder="Search" />
                                </FormGroup>
                                <Button size='sm'><i className='fa fa-search'></i></Button>
                            </Form>
                        </Nav>
                        <Nav className="ml-auto" navbar>

                            <NavItem>
                                <NavLink className='nav-link' exact to='/cart'>
                                    <i className='fa fa-shopping-cart'></i>
                                </NavLink>
                            </NavItem>

                            {(this.loggedIn) ?
                            <NavItem>
                                <NavLink className='nav-link' exact to='/profile'>
                                    <i className='fa fa-user'></i> 
                                </NavLink>
                            </NavItem>
                            : null }

                            {(this.loggedIn) ?

                            <NavItem>
                                <NavLink className='nav-link' exact to='/logout'>
                                    <i className='fa fa-sign-out'></i>
                                </NavLink>
                            </NavItem>
                            : 
                            <NavItem>
                                <NavLink className='nav-link' exact to='/login'>
                                    <i className='fa fa-sign-in'></i>
                                </NavLink>
                            </NavItem>
                            }
                        </Nav>
                    </Collapse>
                </Navbar>
            </div>
        );
    }
}

类导航栏扩展组件{
建造师（道具）{
超级（道具）；
this.loggedIn=this.props.loggedIn；
this.toggle=this.toggle.bind（this）；
此.state={
伊索彭：错
}; 
}
切换（）{
这是我的国家({
isOpen:！this.state.isOpen
});
}
render（）{
返回(
类别
{（这是loggedIn）？
：null}
{（这是loggedIn）？
: 
}
);
}
}

LogOut.js：

class Logout extends Component{
    constructor(props){
        super(props);

        this.handleLogout = this.handleLogout.bind(this); 

    }

    handleLogout(){
        sessionStorage.clear();
        this.props.logOutHandler(); 
        //window.location.replace('/login'); 
    }

    render(){
        return(
            <div>
                <Container className="content-container">
                    <Row className="justify-content-md-center">
                        <Col md={4}>
                            <Card>
                                <CardBody>
                                    <img className="logoutImage" src={logo} width='130' height='130px' alt='Logo'/>
                                    <hr></hr>
                                    <CardText>
                                        Clicking "Logout" will log you out from webshop [NAME]
                                    </CardText>
                                    <Link exact to='/'>
                                    <Button size='sm' className='float-left' color='default'>Cancel</Button>
                                    </Link>
                                    <Link excat to='/login'>
                                        <Button size='sm'className='float-right' color='secondary' onClick={this.handleLogout}>Logout</Button>
                                    </Link>
                                </CardBody>
                            </Card>
                        </Col>
                    </Row>
                </Container>

            </div>
        )
    }
}

类注销扩展组件{
建造师（道具）{
超级（道具）；
this.handleLogout=this.handleLogout.bind（this）；
}
handleLogout（）{
sessionStorage.clear（）；
this.props.logOutHandler（）；
//window.location.replace（'/login'）；
}
render（）{
返回(

单击“注销”将使您从webshop[名称]注销
取消
注销
)
}
}

我正在尝试将状态更新为loggedIn=false。单击logout.js中的注销按钮。这将触发handleLogout方法，该方法将触发This.props.logOutHandler中的方法，该方法将触发App.js中的handleLogout。此方法应将状态更新为loggedIn=false。但不知何故，状态loggedIn=始终为真，直到我刷新页面

---

可能我可以用window.location.replace（“/login”）处理这个错误，但是我想要一个解决方案，而不刷新页面，只在

NavBar.js

中重新提交NavBar组件，您不需要在构造函数中执行

this.loggedIn=this.props.loggedIn

，这可能会导致问题

您可以直接在

渲染

中访问道具：

this.props.loggedIn ? {node} : null

而不是：

this.loggedIn ? {node} : null

---

希望这有帮助。

你是如何发现状态loggedIn总是正确的？您是否确认在单击注销按钮时会调用App.js中的handleLogout方法？