aktualisiert NavBar auf Logout Reactjs

Question

Ich versuche, meine NavBar beim Abmelden zu aktualisieren, hier ist der Code, den ich schrieb:

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> 
    ); 
    } 
} 

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> 
     ); 
    } 
} 

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> 
     ) 
    } 
} 

ich zu u versuchen, pdate den Zustand zu loggedIn = false. Ein Klick auf den Logout-Button in Logout.js. Dies sollte die Methode handleLogout auslösen, die die Methode in this.props.logOutHandler auslöst, die das handleLogout in App.js auslöst. Diese Methode sollte den Status auf loggedIn = false aktualisieren. Aber irgendwie ist der Status loggedIn = immer wahr, bis ich die Seite aktualisiere.

Möglicherweise kann ich diesen Fehler mit window.location.replace Griff (‚/ login‘), aber ich möchte eine Lösung, ohne die Seite zu aktualisieren und nur rerendering die NavBar Komponente

Answer 1

In Ihrem NavBar.js Sie brauchen sich nicht zu tun this.loggedIn = this.props.loggedIn in Ihrem Konstruktor, das kann zu Problemen führen.

können Sie greifen nur die Requisiten direkt im render:

this.props.loggedIn ? {node} : null 

statt:

this.loggedIn ? {node} : null 

Hoffnung, das hilft.