时间戳

首页 > 解决方案 > 导航栏无法显示

javascript - 导航栏无法显示

问题描述

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

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

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

标签： javascriptreactjsfirebasefirebase-authentication

解决方案

我认为问题在于您误解了异步代码（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

这里重要的事情：

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

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

推荐阅读