ログアウトアップデートNavBar React.js

Question

ログアウト（セッションのクリア）時にNavBarを更新しようとしています。 、

class Logout extends Component{ 
    componentDidMount(){ 
     sessionStorage.clear(); 

    } 

    render(){ 
     return(
      <div> 
       Now loggedOut; 
      </div> 
     ) 
    } 
} 

コードは次の処理を行います。

App.js：

class App extends Component { 
    constructor(props){ 
    super(props); 
    this.state = {}; 
    } 
    componentWillMount(){ 
     if(sessionStorage.getItem('access_token') != null && sessionStorage.getItem('id_token') != null){ 
      this.setState({loggedIn: true}); 
     } 
    } 
    render() { 
    return (
     <BrowserRouter> 
      <div> 
      <title>Webshop</title> 
      <NavBar/> 
      <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 == true ? <Route exact path='/logout' component={Logout}/> : null} 
        <Route render={function(){ 
         return (<NotFound/>); 
        }}/> 
       </Switch> 
       <Footer/> 
      </div> 
     </BrowserRouter> 
    ); 
    } 
} 

NavBar.js：

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

    componentWillMount(){ 
     if(sessionStorage.getItem('access_token') != null && sessionStorage.getItem('id_token') != null){ 
      this.setState({loggedIn: true}); 
     } 
     else{ 
      this.setState({loggedIn: 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.state.loggedIn) ? 
          <NavItem> 
           <NavLink className='nav-link' exact to='/profile'> 
            <i className='fa fa-user'></i> 
           </NavLink> 
          </NavItem> 
          : null } 

          {(this.state.loggedIn == true) ? 

          <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これは私が書いたコードですログインすると、access_token & id_tokenがsessionStorageに格納されます。次に、ホームページにリダイレクトしてNavBarを更新します.NavBarには、状態がloggedInに更新されるため、ログアウトボタンが含まれています。今ログアウトするとセッションがクリアされ、id_token & access_tokenは利用できなくなります。これにより、loggedInをfalseに更新するように状態がトリガーされます。&はNavBarコンポーネントを再レンダリングしますが、なんとかしません。 （NavBarが更新するページを更新したとき）

私を助けてくれますか？それに加えて

<NavBar loggedIn={this.state.loggedIn} />

を、トグルに機能を追加します。あなたのApp.jsで

Answer 1

は、私はそのようによう<NavBar/>にthis.state.loggedInに沿って渡す、あなたは真実の単一のソースとして、そこに状態を維持するお勧めしますApp.jsでLOGGEDIN状態なので、のように：

logOut() { this.setState({loggedIn: false}); }

そしてそのように、その関数に沿って通過：

<NavBar loggedIn={this.state.loggedIn} logOut={this.logOut} />

この方法で、あなたはNavbar.jsにthis.props.loggedInに対応し、ログアウトするためのロジックを保つことができる（ともログインしてください場合）一箇所でApp.js

で