Ошибка типа: CurrentUser равен нулю в firebase react

#javascript #reactjs #firebase #firebase-authentication #react-hooks

#javascript #reactjs #firebase #firebase-аутентификация #реагирующие хуки

Вопрос:

Я нашел разные уже отвеченные вопросы на мой вопрос, но они не помогают.

Я использую пользовательский контекст для вызова firebase.auth().onAuthStateChanged() и установки currentUser .

 import React, { useState, useEffect } from "react";
import app from "../firebase";

export const AuthContext = React.createContext();

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

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

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

В моем компоненте я вызываю AuthContext и currentUser :

 import React, { useContext, useEffect, useState } from "react";
import app from "./firebase";
import { AuthContext } from "./Auth/Auth";

function MyComponent() {
  const [invoices, setInvoices] = useState([]);
  const { currentUser } = useContext(AuthContext);

  const getInvoices = () => {
    const database = app.firestore();
    const unsubscribe = database
      .collection("invoices")
      .where("uid", "==", currentUser.uid) // HERE currentUser IS NULL
      .orderBy("date", "desc")
      .onSnapshot((snapshot) => {
        setInvoices(
          snapshot.docs.map((doc) => ({ id: doc.id, ...doc.data() }))
        );
      });

    return () => {
      unsubscribe();
    };
  };

  useEffect(() => {
    getInvoices();
  }, []);

  return (<> ... </>);
}
export default MyComponent;
  

Я считаю, что моя проблема как-то связана с обещаниями, и пользователь еще не загружен. Но все же я не знаю, что здесь делать.

Комментарии:

1. Я бы отладил, если onAuthStateChanged((user) => console.log(user)) сначала что-то показывает или нет.

Ответ №1:

Потенциальной проблемой может быть значение currentUser returns немного позже, поэтому вам нужно добавить дополнительную проверку в свой MyComponent компонент.

Я бы добавил null проверку currentUser и расширил массив зависимостей как:

 useEffect(() => {
  if (currentUser) {
     getInvoices();
  }
}, [currentUser]);
  

Вероятно, в первом раунде useEffect обратный вызов, выполнявшийся один раз currentUser , был неподвижным null .

Комментарии:

1. @T.Karter Потрясающе, рад помочь! 🙂