反应自定义挂钩以从 firebase isLoading 获取文档始终为 false答案

【问题标题】：React custom hook to fetch document from firebase isLoading always false反应自定义挂钩以从 firebase isLoading 获取文档始终为 false
【发布时间】：2022-11-15 06:56:46
【问题描述】：

我创建了这个自定义挂钩来获取（在本例中为收听）firestore 中的文档：

import { doc, onSnapshot } from 'firebase/firestore';
import { useEffect, useState } from 'react';
import { db, auth } from '../../firebase';

function useCurrentUser() {
  const userId = auth.currentUser.uid;

  const [user, setUser] = useState({});
  const [isUserLoading, setIsUserLoading] = useState(false);
  const [isUserError, setIsUserError] = useState(null);

  useEffect(() => {
    const getUser = async () => {
      try {
        setIsUserLoading(true);
        const userRef = doc(db, 'users', userId);
        const unsub = await onSnapshot(userRef, doc => {
          setUser(doc.data());
        });
      } catch (error) {
        setIsUserError(error);
      } finally {
        setIsUserLoading(false);
      }
    };

    getUser();
  }, []);

  return { user, isUserLoading, isUserError };
}

export default useCurrentUser;

问题是：isUserLoading 总是返回false，即使在try 语句中，我将它设置为true

知道为什么会这样吗？

【问题讨论】：

你确定onSnapshot 返回一个你可以等待的承诺吗？看起来不像
你是对的。我多么愚蠢。我再次检查了 firebase 文档firebase.google.com/docs/firestore/query-data/listen 谢谢！
即使在删除 await 之后，isUserLoading 仍然总是返回 false
try or catch 后不是总被叫到吗？

标签： reactjs firebase

【解决方案1】：

onSnapshot 返回一个函数，而不是一个承诺，所以你不能 await

所以你想要做的是：

useEffect(() => {
  setIsUserLoading(true);
  const userRef = doc(db, 'users', userId);
  const unsub = onSnapshot(userRef, doc => {
    setIsUserLoading(false);
    setUser(doc.data());
  });

  return unsub
}, []);

在您当前的代码中，finally 会立即运行，因为没有什么可等待的

【讨论】：

关闭，但您的解决方案也会立即使其错误。
谢谢！将setIsUserLoading 放入回调函数中有效。
我将初始 isUserLoading 值更改为 true 并且我在上面的 unsub 中设置为 false
您应该首先检查数据是否存在。然后分配数据并使加载为假。 onSnapshot() 是一个与本地存储一起工作的监听器。首先它不返回任何数据或缓存数据（如果存在）并向数据库发出请求。当请求得到响应时，它会再次触发。
@Mises 随时编辑我的答案，我不是专家

【解决方案2】：

来自 w3schools.com：

try 语句定义要运行（尝试）的代码块。

catch 语句定义了一个代码块来处理任何错误。

finally 语句定义了一个代码块，无论结果如何都要运行。

因此，您在 try 中将其设置为 true，然后立即将其设置回 false。

【讨论】：