使用Ionic+React时页面重载后Firestore get()回调执行两次求助

我最近在使用Ionic结合React开发项目时，碰到了一个棘手的小问题——页面重载后，Firestore的调用会返回重复数据，排查后发现是回调函数执行了两次。不过奇怪的是，首次进入页面或者从其他页面跳转回来时，一切都正常，只有重载页面才会触发这个问题。

问题代码片段 #

页面逻辑代码 #

// View is already rendered
useIonViewDidEnter(() => { fetchData() });
function fetchData() {
  getPendingCalls(userId).then((calls: any) => {
    if (calls) {
      // Show calls
      setPendingCalls(calls)
    }
  })
}

Firebase服务层代码 #

export function getPendingCalls(userId: string) {
  return new Promise((resolve, reject) => {
    db.collection(collection.calls)
      .where(call.created_by, "==", userId)
      .where(call.state, "==", callState.pending)
      .orderBy(call.date)
      .get()
      .then(function(querySnapshot) {
        const calls: Array<Call> = []
        // ... some more stuff
        resolve(calls)
      })
      .catch(function(error) {
        console.log("Error getting pending calls: ", error);
        resolve(null)
      });
  })
}

问题原因 #

一开始我怀疑是useIonViewDidEnter钩子被触发了两次，但经过验证发现这个钩子实际上只执行了一次。后来在Firebase Slack社区的开发者协助下才搞清楚：useIonViewDidEnter和Promise的回调存在冲突，导致数据被重复设置到状态中。

解决方案 #

将原本的useIonViewDidEnter替换为无依赖项的useEffect，修改后的页面代码如下：

// View is already rendered
useEffect(() => { fetchData() }, [])

这个改动彻底解决了页面重载时数据重复的问题，希望能帮到遇到同类问题的开发者~

内容的提问来源于stack exchange，提问作者martinbaciga