Question

我使用了react useEffect钩子，并且在该钩子内部，我从firebase的foreach中获取数据，这并不奇怪，这似乎可以正常工作。

我想等待foreach和请求完成，以便构建我的数组，并可以在下面的代码中使用它。但是似乎我的代码没有等到继续（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)
        }
      })
    })

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

Answer 1

Object.keys(locationObject).forEach代码不会返回Promise，因此对其调用await不会执行任何操作。

如果您要等待多个诺言解决，通常需要使用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)
  })

在foreach中运行firebase请求，但要等待结果继续执行（异步/等待无效）

1 个答案: