在 useEffect 中使用“array-contains”的 react-native-firebase 查询不断刷新组件答案

【问题标题】：react-native-firebase query with 'array-contains' in useEffect keeps refreshing component在 useEffect 中使用“array-contains”的 react-native-firebase 查询不断刷新组件
【发布时间】：2021-07-06 15:14:42
【问题描述】：

我只是想发出一个请求，只获取包含当前用户 ID 的线程。

如果我删除我的“where”查询，我可以获取所有线程。

这是我的代码：

useEffect(() => {
    const unsubscribe = firestore()
      .collection('THREADS')
      // query is empty
      .where('usersIds', 'array-contains', ['60ddd70c7a3a1e8e62d14dac'])
      .orderBy('latestMessage.createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const threadsQueried = querySnapshot
          ? querySnapshot.docs.map(documentSnapshot => {
              return {
                ...documentSnapshot.data(),
              };
            })
          : null;

        setThreads(threadsQueried);

        if (loading) {
          setLoading(false);
        }
      });

    return () => unsubscribe();
  });

我已经尝试过不将我的 id 放入数组中，但是组件一直在刷新，就像这样：

.where('usersIds', 'array-contains', '60ddd70c7a3a1e8e62d14dac')

我的 Firebase 数据：

我已经在这里查看https://stackoverflow.com/a/59053018/9300663

这里是https://stackoverflow.com/a/59215461/9300663

编辑：所以当 id 没有括号 ('60ddd70c7a3a1e8e62d14dac') 进入查询时它可以工作

但是我的组件一直在刷新。

如果我向我的 useEffect 添加一个空数组或具有依赖关系的数组，则查询不再起作用。

编辑 2：查询正在运行，但被调用了两次，第二次返回“null”，这正在清空我的状态。

【问题讨论】：

如文档中所写，正确的查询是 .where('usersIds', 'array-contains', '60ddd70c7a3a1e8e62d14dac') 没有括号。这个查询有什么错误？
控制台抛出什么错误？什么不完全有效？是来自 Firestore 查询的响应还是带有 react 的响应？
对不起，它在没有括号的情况下工作，但组件不断刷新
如果将依赖数组放入 useEffect 中，查询不可能停止工作。但是正确的实现是在 useEffect 中放一个空数组作为依赖，这样 useEffect 里面的代码在组件挂载时只会执行一次
好的，所以如果我添加或不添加空数组，并且 console.log 查询快照，我首先得到正确的查询快照，然后是“空”。这就是为什么我的状态被“null”覆盖的原因。就像每次查询启动 2 次一样。但是如果没有“where”查询，我只会得到一个响应，而不是 2 个。

标签： javascript firebase react-native react-native-firebase

【解决方案1】：

因此，当我尝试使用 get() 而不是 onSnapshot() 获取 Firebase 查询的另一种方法时，我找到了解决方案：

firestore()
      .collection('THREADS')
      .where('usersIds', 'array-contains', user.id)
      .orderBy('latestMessage.createdAt', 'desc')
      .get()
      .then(querySnapshot => {
        const threadsQueried = querySnapshot.docs.map(documentSnapshot => {
          return {
            ...documentSnapshot.data(),
          };
        });
        setThreads(threadsQueried);

'get()' 的问题是查询只工作一次，并且在创建新线程时不会更新。

但它让我遇到了一个 Firebase 错误，要求我创建索引：“usersIds”和“latestMessage.createdAt”。创建它们后，我可以重用我的旧代码，现在一切正常。

useEffect(() => {
    const unsubscribe = firestore()
      .collection('THREADS')
      .where('usersIds', 'array-contains', user.id)
      .orderBy('latestMessage.createdAt', 'desc')
      .onSnapshot(querySnapshot => {
        const threadsQueried = querySnapshot.docs.map(documentSnapshot => {
          return {
            ...documentSnapshot.data(),
          };
        });
        setThreads(threadsQueried);
      });

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

【讨论】：