Question

我遇到的问题是currentUser渲染时App.js中的null是<PrivateRoute />，这将导致它渲染<Redirect />并导航至/login。但是，如果我查看React Dev Tools，我可以看到value中的Context.Provider字段确实设置了一个用户对象。此prop应该重新渲染应用程序的其余部分，但不会渲染。

为什么currentUser更新不更新路线？

Auth.js

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

export const AuthContext = React.createContext();

export const AuthProvider = ({ children }) => {
  const [currentUser, setCurrentUser] = useState(null);

  useEffect(() => {
    firebase.auth().onAuthStateChanged(setCurrentUser);
  }, []);

  return (
    <AuthContext.Provider value={{ currentUser }}>
      {children}
    </AuthContext.Provider>
  );
};

App.js

import { AuthProvider } from './Auth';
import { AuthContext } from './Auth';

function App() {
  const PrivateRoute = ({ component: Component, ...rest }) => {
    const { currentUser } = useContext(AuthContext);

    return (
      <Route
        {...rest}
        render={props =>
          currentUser ? (
            <Component {...props} {...rest} />
          ) : (
            <Redirect to={{ pathname: '/login' }} />
          )
        }
      />
    );
  };

  return (
    <AuthProvider>
      <Router history={createBrowserHistory()}>
        <Switch>
          <PrivateRoute path="/" exact component={HomeScreen} />
          <Route path="/login" exact component={LogIn} />
        </Switch>
      </Router>
    </AuthProvider>
  );
}

使用React Context的Firebase onAuthStateChanged不更新应用程序

0 个答案: