Firebase onAuthStateChanged с приложением React Context Not Updating - PullRequest
2 голосов
/ 22 октября 2019

Проблема, с которой я сталкиваюсь, заключается в том, что currentUser в App.js равно null при рендеринге <PrivateRoute />, что заставит его отобразить <Redirect /> и перейти к /login. Тем не менее, если я просматриваю React Dev Tools, я вижу, что в поле value в Context.Provider правильно установлен пользовательский объект. Эта команда должна перерисовывать остальную часть приложения, но это не так.

Почему 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>
  );
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...