Question

在我的网络上，我有4种可能的状态，匿名，学生和管理员

并且我应该根据您的角色显示不同的导航栏，我认为当用户状态更改（用户登录注销）时，我的网站应该呈现该导航栏，同时应该保持不变。

问题是每次我移到网站的另一侧时，我的导航栏都会重新渲染

例如，如果我是已登录的学生，并且从/转到/ account，我会在0.5秒到1秒的时间内看到导航栏，我应该将其视为匿名帐户，然后它将更改为学生导航栏

这是我认为与该问题有关的代码

为了使代码更具可读性，我只会像登录的每个用户都是学生一样发布，所以我将扮演两个角色，即登录用户或匿名。

AuthUserContext.js

import React from 'react';

const AuthUserContext = React.createContext(null);

export default AuthUserContext;

withAuthentication.js

const withAuthentication = Component =>
  class WithAuthentication extends React.Component {
    constructor(props) {
      super(props);

      this.state = {
        authUser: null
      };
    }

    componentDidMount() {
      firebase.auth.onAuthStateChanged(authUser => {
        authUser
          ? this.setState(() => ({ authUser }))
          : this.setState(() => ({ authUser: null }));
      });
    }

    render() {
      const { authUser } = this.state;

      return (
        <AuthUserContext.Provider value={authUser}>
          <Component />
        </AuthUserContext.Provider>
      );
    }
  };

export default withAuthentication;

App.js

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <Navigation />
          <Route exact path={routes.LANDING} component={Home} />
          <Route exact path={routes.SIGN_UP} component={SignUp} />
          <Route exact path={routes.SIGN_IN} component={SignIn} />
          <Route exact path={routes.ACCOUNT} component={Account} />
          <Route
            exact
            path={routes.PASSWORD_FORGET}
            component={PasswordForget}
          />
          <Route exact path={routes.ALL_RULES} component={ListRules} />
          <Route
            path={routes.SPECIFIC_RULE}
            render={props => <RuleDescription {...props} />}
          />
          <Route exact path={routes.ALL_USERS} component={ListAllUsers} />
          <Route
            path={routes.USER_ACHIEVEMENTS}
            render={props => <ListAchievements {...props} />}
          />
        </div>
      </Router>
    );
  }
}

export default withAuthentication(App);

Navigation.js

<AuthUserContext.Consumer>
  {authUser => 
     authUser
       ? <NavigationStudent authUser = {authUser}/>
       : <NavigationNonAuth />
  }
</AuthUserContext.Consumer>

const NavigationStudent= () =>
//normal nav bar
const NavigationNonAuth = () =>
//normal nav bar

Answer 1

这是一个React-bootstrap问题，如果有人遇到同样的问题，并使用react-bootstrap，这就是答案

React is re rendering the navigation bar all time

React将我的导航与我的网站正文一起呈现

1 个答案: