时间戳

首页 > 解决方案 > 从实时数据快照中获取对象数组 - Cloud Firestore

javascript - 从实时数据快照中获取对象数组 - Cloud Firestore

问题描述

我正在尝试使用以下代码从 Cloud Firestore 获取实时数据。

export const getRealTimeData = () =>
  db
  .collection('posts')
  .onSnapshot(
    (querySnapshot) => {
      const posts: any = [];
      querySnapshot.forEach((doc) =>
        posts.push(Object.assign({
          id: doc.id
        }, doc.data()))
      );
    },
  );
};

而且，我想使用结果数组在 UI 上显示数据。当我这样做时，结果数组是一个函数，而不是实际的数据数组。

const posts = getRealTimeData();

这是我登录时得到的posts

function () {
  i.kT(), o.al(s);
}

谁能指出我哪里出错了？

标签： javascriptreactjsfirebasegoogle-cloud-firestore

解决方案

添加的实时侦听onSnapshot()器与函数调用的返回值不兼容。那是因为随着时间的推移，它们会继续产生新的结果，并且永远不会真正“返回”任何东西。在这种情况下，您应该放弃创建同步 getter 类型函数的想法 - 它们只是不适用于您想要做的事情。

理想情况下，您将使用像 Redux 这样的架构来管理可用的更新。您的实时侦听器会将查询更新发送到商店，而您的组件将订阅该商店以接收这些更新。

如果你不想使用 Redux（这太糟糕了——你真的应该这样做），那么你应该将你的查询包装在一个useEffect 钩子中，然后让你的监听器设置一个状态钩子变量以便你的组件可以接收更新。

推荐阅读