Firebase 返回两个不同的输出答案

【问题标题】：Firebase returning two different outputsFirebase 返回两个不同的输出
【发布时间】：2020-01-19 14:17:42
【问题描述】：

我创建了一个简单的类，它返回从 firebase 下载的数据。问题是，如果我在课堂上console.log 数据，它会按预期提供数据。但是，如果我将这个类导入其他任何地方并尝试使用它，它会返回未定义的数据。

你能解释一下出了什么问题吗？

我在 dbAPI 类中的 getCollection 函数（数据正确）

getCollection(collection) {
    dataBase
      .collection(collection)
      .get()
      .then(querySnapshot => {
        let data = querySnapshot.docs.map(doc => doc.data())
        console.log(data)
        return data
      })
      .catch(function(error) {})
  }

我尝试获取数据的方式（此处数据未定义）

componentDidMount() {
  const db = new dbAPI()
  let data = db.getCollection("collectionName")
  this.setState({ data })}

【问题讨论】：

How do I return the response from an asynchronous call?的可能重复

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

问题是您试图将数据从回调返回到同步函数，这是不可能的 (link)。您需要承诺您的 getCollection 函数，或者使用 async/await。如果您想将代码转换为使用 async/await，请查看此link。我在下面举了一个例子。基本上，您需要等待get 请求以获取数据，然后执行转换。执行该转换后，您可以返回数据。

async getCollection(collection) {
  const collectionRef = dataBase.collection(collection);
  try {
    const dataSnapshot = await collectionRef.get();
    const data = querySnapshot.docs.map(doc => doc.data());
    console.log(data);
    return data;
  } catch (err) {
    console.log(err);
  }      
}

在您的componentDidMount 中，您必须将 async/await 关键字添加到相应的函数中。 async 需要到顶部将componentDidMount 标记为异步，并且需要等待来自函数调用db.getCollection 的数据。

async componentDidMount() {
  const db = new dbAPI()
  const data = await db.getCollection("collectionName")
  this.setState({ data })
}

【讨论】：

【解决方案2】：

感谢您，我已经成功了，非常感谢您的帮助，我的解决方案：
获取集合：

 async getCollection(collection) {
let data = null
await dataBase
  .collection(collection)
  .get()
  .then(querySnapshot => {
    data = querySnapshot.docs.map(doc => doc.data())
  })
  .catch(function(error) {
    console.error(`Data fetch failed: \n${error}`)
    data = "ERROR"
  })
return data}

获取数据：

  async componentDidMount() {
const db = new Database()
const data = await db.getCollection("collectionName")
this.setState({ ...data })}

【讨论】：