Question

我要达到的目的是创建一个状态值：isLoggedIn并根据其值在导航栏中渲染某些按钮（例如，如果用户登录后登录，则在个人资料页面上不显示注册按钮和重新存储）。我尝试通过在登录方法期间设置状态来尝试这种方法（我向下传递了将带有道具的状态从App设置为登录组件的方法），然后从导航栏组件中读取了状态（也由来自App组件的道具传递了），即使我设置了为某些按钮设置条件渲染，并检查了我通过的this.props.isLoggedIn-导航栏按钮是真是假，大多数情况下渲染是错误的，有时是正确的，但仅在更改一个地址后才正确。注销时类似。当我在注销过程中更改isLoggedIn状态属性时，它根本不起作用（有时当我多次按下注销按钮时，应该消失的导航栏按钮实际上只是瞬间就消失了-我不了解这种现象）。

我也尝试使用localStorage并根据localStorage的值而不是状态进行渲染，但是这一段效果很好，对于我们只看其中一页的情况来说，这是不安全的- >在服务器停止期间，因此应用无法显示我们需要的地址->服务器备份后localStorage仍具有true值，因为未单击注销按钮来结束会话，但由于服务器故障而被破坏了->登录用户的所有按钮都可用，直到我单击注销为止（这是无意义的按钮，因为会话不存在，并且只有在重定向到登录页面后才使按钮消失）。我不知道如何使它工作一直。我的React组件层次结构如下所示：

class App extends React.Component{
constructor(){
super();
this.state = {isLoggedIn: false}
this.switchLogged = this.switchLogged.bind(this)
}
switchLogged = (value) => {
this.setState({isLoggedIn : value})
}
  render() {
  return(
    <Router>
      <NavBar switchLogged={this.switchLogged} isLoggedIn={this.state.isLoggedIn}/>
      <Switch>
        <Route path="/" exact component={MainPage} />
        <Route path="/screenings" exact component={ScreeningsPage} />
        <Route path="/registerpage" exact component={RegisterPage} />
        <Route path="/loginpage" render={() => <LoginPage switchLogged={this.switchLogged}/>}/>
        <Route path="/logout" />
        <Route path="/profile" exact component={ProfilePage} />
        <Route path="/myreservations" exact component={MyReservationsPage} />
        <Route exact component={NotFoundPage} />
      </Switch>
    </Router>
  );
  }
}

这是我的NavBar组件：

class NavBar extends React.Component {
logoutFunction = async () =>{
    await apis.logoutUser()
    .then(() => {
        this.props.switchLogged(false);
        window.location.replace('/loginpage');
    })
    .catch(err => {
        console.log(err);
    });
}
render() {
        return (
            <nav className="navbar navbar-expand-lg navbar-dark bg-dark main-navbar">
                <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">
                    <Logo />
                    <a href="/" className="navbar-brand">
                        Cinema Booking App
                    </a>
                    <ul className="navbar-nav navbar-inner">
                        <li className="nav-item">
                            <a href="/screenings" className="nav-link">
                                Screenings
                            </a>
                        </li>
                        {this.props.isLoggedIn === false &&
                        <li className="nav-item">
                            <a href="/registerpage" className="nav-link">
                                Register
                            </a>
                        </li>}
                    </ul>
                    <ul id="nav-logout" className="navbar-nav navbar-inner"> 
                        {this.props.isLoggedIn === true &&
                        <li className="nav-item">
                            <a href="/myreservations" className="nav-link">
                                My Reservations
                            </a>
                        </li>}
                        {this.props.isLoggedIn === true &&
                        <li className="nav-item">
                            <a href="/profile" className="nav-link">
                                Profile
                            </a>
                        </li>}
                        {this.props.isLoggedIn === true &&
                        <li className="nav-item">
                            <a href="/loginpage" className="nav-link" onClick={this.logoutFunction}>
                                Logout
                            </a>
                        </li>}
                        {this.props.isLoggedIn === false &&
                        <li className="nav-item">
                            <a href="/loginpage" className="nav-link">
                                Login
                            </a>
                        </li>}
                    </ul>
                </div>
            </nav>
        )
    }
}

这是我的登录页面提交功能：

handleSubmit = async (userData) =>{
        await apis.loginUser(userData).then((res) => {
            this.props.switchLogged(true)
            alert(res.data.message);
        }).catch(err => {
            if(err.response){
                console.log(err);
                this.setState({errorMessage: err.response.data.error});
            }
        })
    }

导航栏按钮的条件渲染无法按预期工作（即使为false仍会渲染）

0 个答案: