Firebase Firestore 在 react useEffect() 挂钩内运行两次。为什么？答案

【问题标题】：Firebase Firestore running twice inside react useEffect() hook. Why?Firebase Firestore 在 react useEffect() 挂钩内运行两次。为什么？
【发布时间】：2020-10-17 10:22:30
【问题描述】：

我已在 react-native 的 useEffect() 挂钩中连接到我的 Firebase Firestore 数据库。我的 useEffect 看起来像这样 -

useEffect(() => {
        console.log("HEY")
        firestore().collection('users')
        .doc('user1').get()
        .then(snapshot => {
            console.log("SNAPSHOT",snapshot.data())
        })
        .catch(err => console.log(err))
    })

现在我的日志如下所示：

显然，“HEY”是控制台记录一次，而“SNAPSHOT ...”是控制台记录了两次相同的数据。为什么？另外，我是否会为两个 SNAPSHOTS 收费两次，或者我的第二个快照是从我的本地缓存中检索的，这意味着我只对一个只读文件收费。

【问题讨论】：

标签： firebase react-native google-cloud-firestore use-effect

【解决方案1】：

useEffect(() => {
  firestore()
    .collection("users")
    .doc("user1")
    .get()
    .then(snapshot => {
      console.log("SNAPSHOT", snapshot.data());
    })
    .catch(err => console.log(err));
}, [firestore]);

不要忘记将依赖数组作为第二个参数添加到 useEffect 挂钩

【讨论】：

感谢艾西瓦耶的回复。但是你为什么将 [firestore] 传递给 useffect()。另外，如果我在 .then(snaphot) 传递了一个 redux 操作（这意味着道具将得到更新），我还需要传递 [firestore] 吗？
因此您可以删除 firestore 并只拥有一个空数组。这意味着 useEffect 中的代码将只运行一次。但是，可能是您使用的 firestore 实例不是全局的（假设您有多个具有不同配置的 firestore 实例），然后将 firestore 添加到依赖数组中也会处理这种情况。
因此 useEffect 只会在 firestore 实例更改时运行。对于一个空的依赖数组，useEffect 只会在每个组件初始化时运行一次。没有依赖数组意味着 useEffect 将在每次组件更新时运行。