导航栏无法显示[重复]答案

【问题标题】：Navbar can't be shown [duplicate]导航栏无法显示[重复]
【发布时间】：2020-02-20 09:50:43
【问题描述】：

在我的项目中登录后，导航栏必须更改。

class App extends React.Component {
  render(){
        return(
          <BrowserRouter>
            <div className="App">
              {firebase.auth().onAuthStateChanged(user =>{
                if(user){
                  return(
                    <UserNavBar/>
                  )
                }else{
                  return(
                    <CommonNavBar/>
                  )
                }
              })}
              <Route path="/Home" component={Home}/>
              <Route path="/Photos" component={Photos}/>
              <Route path="/RegisterPage" component={RegisterPage}/>
              <Route path="/LoginPage" component={LoginPage}/>
              <Route path="/Account" component={Account}/>
            </div>
          </BrowserRouter>
        )
    } 
}

export default App

但是什么都没有返回，我试了很多次调试：

系统检测到用户正在登录
如果我在运行后控制台日志

【问题讨论】：

标签： javascript reactjs firebase firebase-authentication

【解决方案1】：

确保每当您在组件中执行异步操作时，在您的情况下是类组件，在 componetDidMount() 中执行相同操作。然后使用setState 更改组件的状态。

你可以在这里看到 react 的生命周期：https://reactjs.org/docs/state-and-lifecycle.html

例如：

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      user: null
    }
  }
  componentDidMount() {
    firebase.auth().onAuthStateChanged(user => user && this.setState({user}) )
  }
  render(){
    const { user } = this.state;
    return(
      <BrowserRouter>
        <div className="App">
          {user ? <UserNavBar/> : <CommonNavBar/>}
          <Route path="/Home" component={Home}/>
          <Route path="/Photos" component={Photos}/>
          <Route path="/RegisterPage" component={RegisterPage}/>
          <Route path="/LoginPage" component={LoginPage}/>
          <Route path="/Account" component={Account}/>
        </div>
      </BrowserRouter>
    )} 
}

export default App

或者你可以使用钩子代替类组件。

【讨论】：

【解决方案2】：

我认为问题在于您误解了异步代码（Promises）和模板渲染概念。你不能只从 Promise 中返回一些组件并期望它出现在结果中。这里有一些不同的方法，你可以用它来启动：

import React, { useState, useEffect } from 'react';

const NavBar = ({ user, isLoading }) => {
    const [isLoading, setIsLoading] = useState(true);
    const [user, setUser] = useState(null);

    useEffect(() => {
        firebase.auth().onAuthStateChanged(user =>{
            setUser(user);
            setIsLoading(false);
        });
    }, []);

    if (isLoading) {
        return <div>Some navigation placeholder without content while info is loading....</div>
    }

    return user ? <UserNavBar/> : <CommonNavBar/>;
}

const App = () => {
    return(
        <div className="App">
            <NavBar />

            <BrowserRouter>
                <Route path="/Home" component={Home}/>
                <Route path="/Photos" component={Photos}/>
                <Route path="/RegisterPage" component={RegisterPage}/>
                <Route path="/LoginPage" component={LoginPage}/>
                <Route path="/Account" component={Account}/>
            </BrowserRouter>
        </div>
    )
};

export default App

这里有重要的事情：

在onAuthStateChanged 中我们不返回某些组件，但我们使用用户信息设置状态数据。设置状态会重新渲染组件，并且取决于当前现有的user 数据，组件会渲染结果。
在加载数据时，最好显示一些占位符（空导航）以避免过多的故障
我们已将导航数据和渲染逻辑提取到单独的组件中，以免使用非常具体的代码污染常见的 App 组件。
代码看起来有点不同，因为 Hooks API 现在在 React 社区中更加“花哨和流行”。

如有问题，请随时添加 cmets，我很乐意提供帮助。

【讨论】：