Firebase + 反應：在授權 state 中讀取文檔已更改並將其添加到上下文中

Question

基於https://dev.to/bmcmahen/using-firebase-with-react-hooks-21ap我有一個身份驗證掛鈎來獲取用戶 state 和 firestore 掛鈎來獲取用戶數據。

export const useAuth = () => {
  const [state, setState] = React.useState(() => { const user = firebase.auth().currentUser return { initializing: !user, user, } })
  function onChange(user) {
    setState({ initializing: false, user })
  }

  React.useEffect(() => {
    // listen for auth state changes
    const unsubscribe = firebase.auth().onAuthStateChanged(onChange)
    // unsubscribe to the listener when unmounting
    return () => unsubscribe()
  }, [])

  return state
}

function useIngredients(id) {
  const [error, setError] = React.useState(false)
  const [loading, setLoading] = React.useState(true)
  const [ingredients, setIngredients] = React.useState([])

  useEffect(
    () => {
      const unsubscribe = firebase
        .firestore()
        .collection('recipes')
        .doc(id)
        .collection('ingredients') .onSnapshot( snapshot => { const ingredients = [] snapshot.forEach(doc => { ingredients.push(doc) }) setLoading(false) setIngredients(ingredients) }, err => { setError(err) } )

      return () => unsubscribe()
    },
    [id]
  )

  return {
    error,
    loading,
    ingredients,
  }
}

現在在我的應用程序中，我可以使用它來獲取用戶 state 和數據

function App() {
  const { initializing, user } = useAuth()
  const [error,loading,ingredients,] = useIngredients(user.uid);
  if (initializing) {
    return <div>Loading</div>
  }

  return (
    <userContext.Provider value={{ user }}> <UserProfile /> </userContext.Provider> )
}

由於在 auth state 更改觸發器之前 UID 是 null，因此 firebase 鈎子被空鍵調用。

一旦我們了解用戶已登錄，如何在這種情況下獲取數據。

Answer 1

可能您可以在 auth hook 中添加您的文檔讀取。

export const useAuth = () => {
    const [userContext, setUserContext] = useState<UserContext>(() => {
        const context: UserContext = {
            isAuthenticated: false,
            isInitialized: false,
            user: auth.currentUser,
            userDetails: undefined
        };
        return context;
    })

    function onChange (user: firebase.User | null) {
        if (user) {
            db.collection('CollectionName').doc(user.uid)
                .get()
                .then(function (doc) {
                    //set it to context
                    })
                });

        }
    }

    useEffect(() => {
        const unsubscribe = auth.onAuthStateChanged(onChange)
        return () => unsubscribe()
    }, [])

    return userContextState
}

您可以在提供程序中使用一些加載微調器來等待事情完成。