时间戳

首页 > 解决方案 > 在 foreach 中运行 firebase 请求，但希望等待结果继续进行（异步/等待不起作用）

reactjs - 在 foreach 中运行 firebase 请求，但希望等待结果继续进行（异步/等待不起作用）

问题描述

我正在使用 react useEffect 钩子，在该钩子中，我正在从 firebase 的 foreach 中获取数据，这没有什么奇怪的，这似乎可以正常工作。

我想等待 foreach 和 requests 完成，这样我的数组就会被构建，我可以在下面的代码中使用它。但似乎我的代码在继续之前没有等待（foreach 中的 console.log 最后显示在我的控制台中）。

  useEffect(() => {
    const unsubscribe = firebase
      .locations()
      .once('value')
      .then(async snapshot => {
        if (snapshot.val() !== null) {
          const locationObject = snapshot.val()
          const userInformation = []

          await Object.keys(locationObject).forEach(element => {
            firebase.user(element).once('value', userSnapshot => {
              if (userSnapshot.val() !== null) {
                console.log('inside location')
                userInformation.push({
                  userId: 1,
                  name: userSnapshot.val().username
                })
              }
            })
          })

          console.log('usrInfo', userInformation)
        }
      })
    })

我在这里做错了什么？任何帮助，将不胜感激！

标签： reactjsfirebasefirebase-realtime-databaseasync-awaitreact-hooks

解决方案

该Object.keys(locationObject).forEach代码不返回 a Promise，因此调用await它不会做任何事情。

如果您想等待多个 Promise 解决，您通常需要使用Promise.all. 我通常还建议使用DataSnapshot.forEach()而不是，Object.keys().forEach()因为它维护子节点的顺序。

所以结合起来会变成这样：

const unsubscribe = firebase
  .locations()
  .once('value')
  .then(async snapshot => {
    let promises = [];
    snapshot.forEach(element => {
      promises.push(firebase.user(element.key).once('value'))
    })
    return Promise.all(promises);
  }).then(snapshots => {
    const userInformation = []
    snapshots.forEach(userSnapshot => {
      if (userSnapshot.exists()) {
        userInformation.push({
          userId: 1,
          name: userSnapshot.val().username
        })
      }
    })
    console.log('userInfo', userInformation)
  })

推荐阅读