Как использовать наблюдаемые для обновления провайдера контекста для целей компонента провайдера (React / Firebase)?

Question

Я столкнулся с проблемой реализации контекста firebase-auth в моем приложении. Все казалось хорошо, пока я не попытался справиться с настойчивостью с помощью Firebase Как вы можете видеть ниже, firebase использует наблюдаемую систему с именем onAuthStateChanged для захвата вошедшего в систему пользователя, и это можно использовать для обновления объекта auth для передачи через провайдера. Когда вы обновляете sh это приложение, наблюдаемое в конечном итоге снова вернет объект аутентификации, который должен обновить провайдера, и обновит все компоненты, которые используют контекст аутентификации в дереве реакции.

Сначала я получаю ошибка: TypeError: Cannot read property 'user' of undefined

Если я регистрирую состояние в моем потребляющем компоненте, я получаю: Auth state within component undefined

Это мой компонент, который действует как поставщик для остальной части дерева компонента приложения .

AuthContext.js
import React from "react";
import * as firebase from "firebase/app";
import { firebaseAuth } from "../reducers/AuthReducer";

export const Auth = React.createContext();

export const AuthProvider = (props) => {
  const [state, dispatch] = React.useReducer(
    firebaseAuth,
    { user: {} },
    firebase.auth().onAuthStateChanged((user) => {
      return user;
    })
  );

  return (
    <Auth.Provider value={{ state, dispatch }}>{props.children}</Auth.Provider>
  );
};

Это мой компонент, который использует предоставленный контекст аутентификации:

RightPanel.js
import React from "react";
import HomePageAuth from "./homepageauth/HomePageAuth";
import "./rightpanel.module.less";
import NavCluster from "../../../nav/navcluster/NavCluster";
import { Auth } from "../../../../contexts/AuthContext";

const RightPanel = () => {
  const { state, dispatch } = React.useContext(Auth);

  console.log("Auth state within component", state);

  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
        marginTop: "80px",
        width: "50%",
      }}
    >
      {state.user ? <NavCluster /> : <HomePageAuth />}
    </div>
  );
};

export default RightPanel;

Answer 1

В вашем init вы возвращаете пользователя, а не объект с пользователем в качестве ключа. См. https://reactjs.org/docs/hooks-reference.html#lazy -инициализация

firebase.auth().onAuthStateChanged((user) => {
  return {user};
})