reactjs - Why do I get undefined value from async function?

Question

I have been using Google firestore as a database for my projet. In the collection "paths", I store all the paths I have in my app, which are composed of 2 fields : name, and coordinates (which is an array of objects with coordinates of points).

Anyway, i created a utility file in utils/firebase.js

In the file, i have this function which gets all the paths in my collection and return an array of all documents found :

export const fetchPaths = () => {
    let pathsRef = db.collection('paths');
  let pathsArray = []
    pathsRef.get().then((response) => {
        response.docs.forEach(path => {
      const {nom, coordonnees } = path.data();
      pathsArray.push({ nom: nom, coordonnees: coordonnees})
    })
    console.log(pathsArray)
    return pathsArray;
    });
};

In my react component, What i want to do is to load this function in useEffect to have all the data, and then display them. Here is the code I use :

import { addPath, fetchPaths } from './Utils/firebase';

//rest of the code

useEffect(() => {
        let paths = fetchPaths()
        setLoadedPaths(paths);
    }, [loadedPaths])

//.......

The issue here is if I console log pathsArray in the function it's correct, but it never gets to the state. When i console log paths in the component file, i get undefined.

I am quite new with react, i tried different things with await/async, etc. But I don't know what i am doing wrong here / what i misunderstand.

I know that because of my dependency, i would be supposed to have an infinite loop, but it's not even happening

Thank you for your help

Have a nice day

question from:https://stackoverflow.com/questions/66061995/why-do-i-get-undefined-value-from-async-function

Answer 1

fetchPaths does not return any result. It should be:

export const fetchPaths = () => {
    let pathsRef = db.collection('paths');
  let pathsArray = []
    return pathsRef.get().then((response) => {
        response.docs.forEach(path => {
      const {nom, coordonnees } = path.data();
      pathsArray.push({ nom: nom, coordonnees: coordonnees})
    })
    console.log(pathsArray)
    return pathsArray;
    });
};

note the return statement.

Since the fetchPaths returns a promise, in the effect it should be like following:

useEffect(() => {
     fetchPaths().then(paths => 
        setLoadedPaths(paths));
    }, [loadedPaths])