Question

我在注销时尝试更新我的NavBar（清除会话）。这是我写的代码：

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：

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

    }

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

代码执行以下操作，登录后会存储access_token＆amp; sessionStorage中的id_token。然后通过重定向到主页来更新NavBar，现在NavBar包含注销按钮，因为状态更新为loggedIn。现在当我退出时，我清除了会话，所以id_token＆amp; access_token不再可用。这应该触发状态将loggedIn更新为false＆amp;重新渲染NavBar组件但不知何故它没有。（当我刷新页面时，NavBar会更新）

有人可以帮帮我吗？

Answer 1

在App.js中，我建议您将状态保留为单一事实来源，然后将this.state.loggedIn传递给<NavBar/>，如下所示：

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

除此之外，添加一个函数来切换App.js中的loggedIn状态，如下所示：

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

并传递这样的功能：

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

通过这种方式，您可以回复this.props.loggedIn中的Navbar.js，并在App.js

中的一个位置保留您的逻辑以便退出（并且还可以登录）

注销更新NavBar React.js

1 个答案: