从firebase异步获取数据并在数据到达后设置状态

Question

我正在使用 react-native，我想从 firebase 实时数据库中获取数据并设置该数据的状态，然后才加载视图，我不希望用户看到数据被推送和映射在每次加载聊天视图时。

这是我尝试过的

_getMessages = async () => {

    let message_array = [];

    await firebase.database().ref('User-Message').child(this.state.fromUser).child(this.state.toUser).on('child_added', async (snapshot) => {

      let message_id = await snapshot.key;

      let message_ref = await firebase.database().ref('Message').child(message_id).once('value', async (payload) => {

        await message_array.push(payload.val())

      })

      await this.setState({ messages : message_array })

    })

}

而在我的componentWillMount 中，只需像这样调用_getMessages() 函数

componentWillMount = async () => {

    await this._getMessages();

}

在从 firebase 获取所有消息后，如何确保设置消息的状态？

Answer 1

这行不通：

await firebase.database().ref('User-Message').child(this.state.fromUser).child(this.state.toUser).on('child_added', async (snapshot) => {

Firebase 的 on() 方法开始主动侦听事件。它没有明确的完成时间，因此不返回承诺。因此它不能与await/async一起使用。

我的感觉是你试图简单地加载所有用户消息，使用once("value" 最容易做到这一点：

let ref = firebase.database().ref('User-Message').child(this.state.fromUser).child(this.state.toUser);
let message_array = await ref.once('value', async (snapshot) => {
  let messagePromises = [];
  snapshot.forEach(function(userMessageSnapshot) {
    messagePromises.push( firebase.database().ref('Message').child(snapshot.key).once('value', async (payload) => {
      return payload.val();
    })
  })
  await messageSnapshots = Promise.all(messagePromises);
  this.setState({ messages : messageSnapshots })
})

---

如果您想获得实时更新，则必须使用on() 侦听器。但这确实意味着您不能在外部侦听器中使用async/await。它看起来像这样：

let ref = firebase.database().ref('User-Message').child(this.state.fromUser).child(this.state.toUser);
ref.on('value', async (snapshot) => {
  let messagePromises = [];
  snapshot.forEach(function(userMessageSnapshot) {
    messagePromises.push( firebase.database().ref('Message').child(snapshot.key).once('value', async (payload) => {
      return payload.val();
    })
  })
  await messageSnapshots = Promise.all(messagePromises);
  this.setState({ messages : messageSnapshots })
})