我创建了一个反应原生应用程序，并且每次都必须刷新我的屏幕才能从 firebase 获取新添加的数据。我正在使用钩子

Question

我创建了一个 react native 应用程序，并且每次都必须刷新我的屏幕才能从 firebase 获取新添加的数据。我是 firebase 的新手，我认为我可以使用快照来获取当前数据，但我仍然必须在每次创建新事件时刷新我的应用程序才能在此视图上查看所有更新的事件。任何帮助将不胜感激

export default function EventsHostedScreen() {
    const navigation = useNavigation();
    const [eventsData, setEventsData] = useState([]);

    useEffect(() => {
        async function fetchData() {
            const currentUser = await firebase.auth().currentUser.uid;
            result = [];

            const eventsCollection = firebase.firestore().collection('events');

            eventsCollection.get().then((snapshot) => {
                snapshot.docs.forEach((doc) => {
                    if (doc.exists === true && doc.data().userId !== null) {
                        if (doc.data().userId === currentUser) {
                            result.push(doc.data());
                        }
                    }
                });
                setEventsData(result);
            });

            console.log('RESULT==>', result);
        }

        fetchData();
    }, []);

Answer 1

您可以使用onSnapshot method 收听文档或集合的更改。除此之外，我建议对您的代码进行一些更改。

在我看来，您想查询用户 ID 与当前用户 ID 相同的文档。使用the where method 将其包含在查询中会更容易。这样，您就不必像现在这样使用 if 语句过滤文档。您还将保存 Firestore 读取，因为现在您正在获取所有事件，但使用 where 方法您将仅读取相等子句为真的文档。

我还会检查您是否有可用的 currentUser，除非您 100% 确定在 currentUser 加载时不会呈现此组件。而且您不需要等待 currentUser，因此不再需要异步函数。

通过这些更改，您的 useEffect 可能如下所示。

useEffect(() => {
  // Check if currentUser exists to avoid errors
  if (!firebase.auth().currentUser) {
    return;
  }

  const currentUser = firebase.auth().currentUser.uid;

  // Create subscription to listen for changes
  const unsubscribe = firebase
    .firestore()
    .collection('events')
    .where('userId', '==', currentUser)
    .onSnapshot((snapshot) => {
      const result = [];
      snapshot.forEach((doc) => {
        result.push(doc.data());
      });

      setEventsData(result);
    });

  // Remove the listener when component unmounts
  return () => unsubscribe();
// Add currentUser to useEffect dependency array, so useEffect runs when it changes
}, [firebase.auth().currentUser]);