如何在页面刷新时显示加载器/微调器并且需要等待 React JS 中的 authUser 结果？答案

【问题标题】：How show the loader/spinner when page refresh and need to wait the authUser result in React JS?如何在页面刷新时显示加载器/微调器并且需要等待 React JS 中的 authUser 结果？
【发布时间】：2020-07-29 18:31:11
【问题描述】：

我有一个问题，当刷新页面时，首先显示<NavigationNonAuth/>，因为authUser结果还没有出现，第二个显示<NavigationAuth/> 当我等待authUser时显示加载的最佳做法是什么@


const Navigation = () => (

   <div>
     <AuthUserContext.Consumer>
       {authUser => (
          authUser ? <NavigationAuth/> : <NavigationNonAuth/>
       )
       }
     </AuthUserContext.Consumer>
   </div>
);

const NavigationAuth = () => (
   <nav className="navbar bg-white border btn-lg fixed-top justify-content-start p-3">
     <Link className="navbar-brand text-dark" to={ROUTES.DASHBOARD}>Dashboard</Link>
     <Link className="navbar-brand text-dark" to={ROUTES.SEARCH}>Search</Link>
     <Link className="navbar-brand text-dark" to={ROUTES.SETTINGS}>Settings</Link>
     <SignOutButton/>
   </nav>

);

const NavigationNonAuth = () => (
   <nav className="navbar bg-white btn-lg fixed-top justify-content-start p-3">
     <Link className="navbar-brand text-dark" to={ROUTES.DASHBOARD}>Landing</Link>
     <Link className="navbar-brand text-dark" to={ROUTES.SIGN_IN}>Sign In</Link>
   </nav>

);

export default Navigation;

context.js

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() {
      this.listener = this.props.firebase.auth.onAuthStateChanged(
         authUser => {
           authUser
              ? this.setState({ authUser })
              : this.setState({ authUser: null });
         },
      );
    }

    componentWillUnmount() {
      this.listener();
    }

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

  return withFirebase(WithAuthentication);
};

export default withAuthentication;

【问题讨论】：

标签： javascript reactjs routes react-router

【解决方案1】：

在你的渲染函数中做这样的事情：

constructor() {
    this.state = { isLoading: true }
}

componentDidMount() {
    this.setState({isLoading: false})
}

render() {
    return(
        this.state.isLoading ? *showLoadingScreen* : *yourPage()*
    )
}

在构造函数中将 isLoading 初始化为 true，在 componentDidMount 上初始化为 false

【讨论】：