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

Question

我正在尝试使用以下代码从 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);
}

谁能指出我哪里出错了？

Answer 1

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

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

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