为什么我从异步函数中得到未定义的值？答案

【问题标题】：Why do I get undefined value from async function?为什么我从异步函数中得到未定义的值？
【发布时间】：2021-05-09 17:16:22
【问题描述】：

我一直使用 Google Firestore 作为我的项目的数据库。在“路径”集合中，我存储了我在应用程序中拥有的所有路径，它们由 2 个字段组成：名称和坐标（这是一个具有点坐标的对象数组）。

无论如何，我在 utils/firebase.js 中创建了一个实用程序文件

在文件中，我有这个函数，它获取我集合中的所有路径并返回找到的所有文档的数组：

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

在我的反应组件中，我要做的是在 useEffect 中加载此函数以获取所有数据，然后显示它们。这是我使用的代码：

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

//rest of the code

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

//.......

这里的问题是，如果我在函数中控制台日志路径数组是正确的，但它永远不会进入状态。当我在组件文件中控制台日志路径时，我得到未定义。

我对 react 很陌生，我尝试了 await/async 等不同的东西。但我不知道我在这里做错了什么/我误解了什么。

我知道由于我的依赖，我应该有一个无限循环，但它甚至没有发生

感谢您的帮助

祝你有美好的一天

【问题讨论】：

标签： reactjs google-cloud-firestore react-hooks

【解决方案1】：

fetchPaths 不返回任何结果。应该是：

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

注意返回语句。

由于fetchPaths 返回了一个promise，其效果应该如下：

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

【讨论】：