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

我使用的是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 })

    })

}

在我的

组件中，willmount

只是像这样调用

\u getMessages（）

函数

componentWillMount = async () => {

    await this._getMessages();

}

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

这不起作用：

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

Firebase的

on（）

方法开始主动侦听事件。它没有一个明确的时刻，当它完成，所以没有回报的承诺。因此，它不能与

wait

/

async

一起使用

我的感觉是，您试图简单地加载所有用户消息，这是使用

一次（“value”

）最容易做到的：

---

如果你想获得实时更新，你必须使用

on（）

监听器。但这意味着你不能在外部监听器中使用

async

/

wait

。它看起来像这样：

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 })
})

---

你在使用任何类型的状态管理吗？Redux或Mobx会使这变得简单得多。不，我没有..这是我在react native中的第一个项目，我明天必须交付，所以我没有时间尝试Redux..这个方法会用firebase更新状态吗？我的意思是如果我发送消息怎么办？你需要（）监听器。它可以很好地工作，只是意味着你不能使用promises或

async

/

Wait

。我也添加了一个示例。请注意，此代码中的输入错误肯定是可能的。

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 })
})