react + firebase unsubscribe 不是 useEffect 中的功能答案

【问题标题】：react + firebase unsubscribe is not a function in useEffectreact + firebase unsubscribe 不是 useEffect 中的功能
【发布时间】：2020-08-09 11:34:16
【问题描述】：

我想了解为什么下面的代码会触发这个错误？

类型错误退订不是函数

当我使用.onSnapshot()函数而不是get()时，它没有这样的错误。

谢谢

  useEffect(() => {
    const unsubscribe = database
      .collection("Maps")
      .doc(id)
      .collection("Entries")
      .get()
      .then(
        data => {
          data.forEach(doc => {
            console.log(doc.id, " => ", doc.data());
          });
          setLoading(false);
        },
        err => {
          setError(err);
          console.log(err);
        }
      );
    return () => unsubscribe();
  }, [id]);

【问题讨论】：

标签： javascript reactjs firebase google-cloud-firestore

【解决方案1】：

您无法取消订阅get() 电话。因此，get() 不会返回取消订阅方法，您的调用将失败。

当您使用onSnapshot 开始侦听数据时，客户端会继续侦听数据的更改。因此，它会返回一个函数，您可以调用该函数来停止监听。

当你调用get()加载数据时，客户端从服务器获取一次数据，然后立即停止监听变化。这就是为什么在您致电get() 后无需取消订阅（也没有可能停止）。

如果加载数据的时间可能比加载组件的时间长，您需要检查 then() 处理程序中组件的卸载。有关这方面的示例，请参阅Is there a way to check if the react component is unmounted?

【讨论】：

谢谢。在 useEffect 中使用 get() 并在卸载时取消订阅/清理它的正确方法是什么？如果我不这样做return () => unsubscribe(); 控制台错误显示无法更新未安装组件的状态，并且可能有内存泄漏
完美。谢谢！和You can accept an answer in 6 minutes。让我等一下

【解决方案2】：

Unsubscribe() 不是函数，因为从数据库返回的不是函数。调用函数以换取清理。有一个进行清理并调用它的函数。

【讨论】：

【解决方案3】：

取消订阅适用于实时监听器 (onSnapshot)。 Get() 用于异步函数并返回一个promise。

【讨论】：