时间戳

首页 > 解决方案 > 为什么导出到另一个文件时 onSnapshot 侦听器不工作

javascript - 为什么导出到另一个文件时 onSnapshot 侦听器不工作

问题描述

我设置了一个 onSnapshot 侦听器函数，但是一旦我将它解压缩到另一个文件，它就停止工作了。

下面的代码在实用程序文件中。

export const getUserCampsites = () => {

      const user = store.getState().authReducer.user 
      let campsitesArr = [];

      //check if user is signed in
      if(user.hasOwnProperty('uid')){ 
            const campsites = db
            .collection('campsites')
            .where('owner', '==', user.uid);

            const unsub = campsites
            .onSnapshot(snapshot => {
                  snapshot.forEach(el => {
                        campsitesArr.push(el.data());
                  })

            });
      
      return {unsub, campsitesArr}
      }
}

这就是我在组件中的内容：

      const [camps, setCamps] = useState();

      useEffect(() => {
            const res = getUserCampsites()
            if(res) {
                  const campsites = res.campsitesArr
                  setCamps(campsites);
                  return(() => res.unsub())

            }
      }, [user])

当组件中的“setCamps”被调用时，数组返回为空，但随后在第二次重新渲染时被填充，我是否遗漏了什么？它应该是异步的吗？

提前致谢！

标签： javascriptreactjsfirebasegoogle-cloud-firestorereact-hooks

解决方案

getUserCampsites 函数中的数组 campsitesArr 不是响应式的，因此如果其值发生变化，则不会重新返回。当调用 getUserCampsites 函数时，它会将 campsitesArr 初始化为一个空的 arr，然后初始化侦听器。但是，它不会等待侦听器获取值，然后继续执行下一行，即 return 语句。因此，无论何时返回，campsitesArr 仍然进入，因此您始终返回一个空数组。

最好的解决方案是将一个函数作为参数传递给 getUserCampsites，它接收一组营地。每当侦听器获取新值时，都会调用此函数。例如，您可以将一个函数传递给 getUserCampsites，该函数使用新的营地数组调用 setState

推荐阅读