Question

我在前端使用reactjs和bootstrap。当我登录导航的链接应该显示但没有显示链接。

App.js

    class App extends Component {
  constructor(props)
  {
    super(props);
    this.state ={logged: true}
    this.TokenData = cookie.load("userToken");
    this.logOutFn = this.logOutFn.bind(this);
    this.updateLink = this.updateLink.bind(this);
  }
  updateLink(){
    console.log("cald");
    if(this.TokenData !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }
  logOutFn(e){
    e.preventDefault();
    cookie.remove('userToken', { path: '/' })
    this.updateLink();
  }
  render() {
    return (
      <div className="App">
        <Router>          
            <div>
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
              <a className="navbar-brand" href="">Tutory</a>
              <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                <span className="navbar-toggler-icon"></span>
              </button>

              <div className="collapse navbar-collapse" id="navbarSupportedContent">
                <ul className="navbar-nav mr-auto">
                  <li className="nav-item" hidden={this.state.logged}>
                  <Link className="nav-link" to={'/Profile'}>Profile</Link>
                  </li>
                  <li className="nav-item" hidden={this.state.logged}> 
                  <a onClick={this.logOutFn}><Link className="nav-link" to={'/'}>Logout</Link></a>
                  </li>
                  {/* <li className="nav-item">
                  <a className="nav-link" onClick={this.updateLink}>change</a>
                  </li> */}
                </ul>
              </div>
            </nav>

               <Switch>
                  {/* <Route exact path='/' component={Home} /> */}
                  <Route exact path='/' component={Login} />
                  <Route exact path='/Login' component={Login} />
                  <Route exact path='/Register' component={Register} />
                  <Route exact path='/Admin' component={Admin} />
                  <Route exact path='/AccountEdit/:aid' component={AccountEdit} />
                  <Route exact path='/Profile' component={Profile} />
                  <Route exact path='/Welcome' render={(props)=><Welcome updateLink={this.updateLink} {...props}/>}/>
               </Switch>
            </div>
         </Router>
      </div>
    );
  }
}

一旦我登录，我就会调用函数updateLink（），但在刷新before login after login后登录after refresh之前刷新页面之前，它不会显示任何链接>

Answer 1

我改变了这段代码

updateLink(){
    console.log("cald");
    if(this.TokenData !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }

进入这个

updateLink(){
    console.log("cald");
    if(cookie.load("userToken") !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }

它完美无缺.....

Answer 2

实际上，如果你在状态中设置userToken，它将运行良好。

  constructor(props)
  {
    super(props);
    this.state ={
       logged: true,
       TokenData: cookie.load("userToken")
    }
    this.logOutFn = this.logOutFn.bind(this);
    this.updateLink = this.updateLink.bind(this);
  }

然后在updateLink中你可以这样做：

updateLink(){
    console.log("cald");
    if(this.state.TokenData !== undefined)
    {
      console.log("inside");
      this.setState({logged: false})
    }
  }

反应js隐藏并显示导航链接

2 个答案: