如何仅在用户使用 React Js Context API 登录时或用户登录时获取数据？

Question

下面的代码在应用程序启动后立即运行，但我想仅在用户登录或用户登录时获取我集合中的数据。我该怎么做？

import React, { createContext, useState, useEffect } from "react";

import useAuthentication from "./../hooks/useAuthentication";
import * as firebase from "firebase";
import "firebase/firebase-firestore";

export const RequestContext = createContext();

export const RequestProvider = (props) => {
  const [richieste, setRichieste] = useState([]);
  const [inCaricamento, setInCaricamento] = useState(true);
  const auth = useAuthentication();

  useEffect(() => {
    const firestoreCall = firebase
      .firestore()
      .collection("richieste")
      /*  .where("userId", "==", props.loggedIn.uid) */

      .onSnapshot((snapshot) => {
        const newRichieste = snapshot.docs.map((richiesta) => ({
          id: richiesta.id,
          ...richiesta.data(),
        }));
        let nuoveRichieste = newRichieste.sort(function (a, b) {
          return a.timestamp - b.timestamp;
        });

        setRichieste(nuoveRichieste.reverse());
        setInCaricamento(false);
      });

    return () => firestoreCall;
  }, []);

  return (
    <RequestContext.Provider value={[richieste, setRichieste]}>
      {props.children}
    </RequestContext.Provider>
  );
};```

Answer 1

在useEffect中可以添加auth check和调用firestore。

useEffect(() => {
    let firestoreCall;
    if(auth) {
    firestoreCall  = firebase
      .firestore()
      .collection("richieste")
      /*  .where("userId", "==", props.loggedIn.uid) */

      .onSnapshot((snapshot) => {
        const newRichieste = snapshot.docs.map((richiesta) => ({
          id: richiesta.id,
          ...richiesta.data(),
        }));
        let nuoveRichieste = newRichieste.sort(function (a, b) {
          return a.timestamp - b.timestamp;
        });

        setRichieste(nuoveRichieste.reverse());
        setInCaricamento(false);
      });  
    }
    

    return () => {
        firestoreCall?.();
    };
  }, [auth]);

如何仅在用户使用 React Js Context API 登录时或用户登录时获取数据？

How to fetch data only if or when the user is logged in with React Js Context API?

javascript

reactjs

expo

react-context