为什么在导出到另一个文件时 onSnapshot 侦听器不起作用

Question

I had an onSnapshot listener function set up, but once I extracted it to another file it stopped working.

The code below is in the utilities file.

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}
      }
}

And this is what I have in the component:

      const [camps, setCamps] = useState();

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

            }
      }, [user])

When 'setCamps' in the component is called the array comes back empty, but is then filled on a second re-render, am I missing something? Is it supposed to be asynchronous?

Thanks in advance!

Answer 1

The array campsitesArr in the getUserCampsites function is not reactive, so it is not re returned if its value changes. When the getUserCampsites function is called, it inializes the campsitesArr to an empty arr and then it initializes the listener.. However it does not wait for the listener to fetch values before it moves on to the next line which is the return statement. So whenever the return is reached, the campsitesArr is still enter, therefore you always return an empty array.

The best solution will be to pass a function as an argument to the getUserCampsites, that receives an array of camp sites. This function will be called whenever the listener gets new values. For example, you can pass a function to the getUserCampsites that calls setState with the new array of camp sites

Answer 2

Not sure what was wrong, I think it was because the function was returning before the campsitesArr had been populated.

To fix this I passed the setCamps function as a prop and used it directly inside the onSnapshot call back:

export const getUserCampsites = (setCamps) => {

      const user = store.getState().authReducer.user 
      

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

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

                  })
                  setCamps(campsitesArr)
            });
            
      
      return unsub
      }
}