不清楚在 react native 中使用 async 和 await

Question

我最近在一个业余项目中开始研究将 React Native 与 Expo 结合使用。我想从 Firebase 异步加载数据，经过大量尝试和谷歌搜索后实现了它，但我仍然不完全理解它是如何工作的。

 componentDidMount = async() => {
      await ref.once('value', async (snapshot) => {
      let imageUrl = [];
      snapshot.forEach(function(urlSnapshot) {
        imageUrl.push(urlSnapshot)
      });
      this.setState({ items : imageUrl});
    });
  }

在下图中，我知道我是在告诉 componentDidMount 通过 async() 关键字异步运行。我也知道该函数要求函数等待一次查询的结果，但我不理解的是在调用函数返回快照时使用异步。那里可能有文档或问题向您展示如何操作，但没有人可以回答我想了解的工作原理。

Answer 1

ref.once() (link to API docs) 返回一个在数据库查询完成时解决的承诺。您也可以像现在一样提供回调，但是在异步函数中，这只会使事情变得更加复杂。您应该仅使用返回的 Promise。这将使您的代码更易于阅读。

此外，您应该在某个时候调用val() 将快照子项转换为实际上是字符串的内容。我会猜测什么时候会发生这种情况，但是由于您没有提供数据库结构，因此无法确定。

const snapshot = await ref.once('value');
const urls = [];
snapshot.forEach(urlSnapshot => {
    urls.push(urlSnapshot.val());
});
this.setState({ items: urls });