首页 > 解决方案 > React Firebase Snapshot 检索所有子项

问题描述

所以我一直在为一个我似乎无法在 React 中工作的函数挠头。我正在使用 Firebase 存储和 Cloud Firestore 创建这个基本文件管理器。

我要做的是获取“文件”中的所有子项,但在这个过程中,还在获取过程中运行一个函数,获取文件上传者的名称,然后将其推送到我的数组,以便我可以显示文件列表正确的信息,而不是显示文件所有者的 ID。这是我到目前为止的代码:

export const retrieveLibrary = () => {
    return new Promise((resolve, reject) => {
        fetchCompanyId().then((companyId) => {
            var allFiles = [];
            database.collection("files").orderBy("uploadDate").get().then((snapshot) => {
                if(!snapshot.empty){
                    snapshot.forEach((singleSnapshot) => {
                    fetchFileOwner(singleSnapshot.data().owner).then((name) => {
                            allFiles.push({key: singleSnapshot.id, downloadLink: singleSnapshot.data().downloadLink, name: singleSnapshot.data().name, type: singleSnapshot.data().type, uploadDate: singleSnapshot.data().uploadDate, password: singleSnapshot.data().password ? true:false, owner: name});
                        })
                    })
                    resolve(Promise.all(allFiles));
                }
            }).catch((e) => {
                reject(e);
            })
        })
    })
}

在这里,我基本上是在做与 Firebase 相关的所有事情,并尝试创建一个可以从 Promise 中检索的数组。

export const fetchFileOwner = id => {
    return new Promise((resolve, reject) => {
        database.collection("users").doc(id).get().then((userInfo) => {
            resolve(userInfo.data().firstName);
        }).catch((e) => {
            reject(e);
        })
    })
}

很简单,获取用户的名字。

fetchLibraryFiles().then((library) => {
  setLibraryFiles(library);
}).catch((e) => {
  console.log(e);
})

这是我为检索完整库而调用的函数。正如您可能看到的,我已尽力找到一种方法来做到这一点,但我无法检索完整的数组。但是,当我删除retrieveLibrary 中的 fetchFileOwner 函数调用时-它可以工作。我在这里做错了什么,为什么错了?在我必须调用其他函数并等待检索数据的情况下,做这样的事情的最佳方法是什么?

非常感谢您的帮助。

数据格式在这里:所有者只是绑定到帐户的 UID。 格式

标签: javascriptreactjsfirebasegoogle-cloud-firestore

解决方案


推荐阅读