Firebase reference in a foreach

Question

I want to display a screen with offers from users for a task. The problem is that I have to load the offers and then for every offer, I need the userdata for their review counter.

Why does this not work? I simply cannot figure it out With the code below I have accomplished that the data will get displayed, but 2 times. The first time, I only got the offer data and the second time the full needed data. But it should be displayed only once, with full data only. How can I do that?

  loadTaskOffers() {
var offers = [];
firebase
  .database()
  .ref("Offers")
  .child(this.state.taskID)
  .once("value", snap => {
    if (snap.exists()) {
      snap.forEach(snap_offer => {
        var offer = snap_offer.val();
        offers.push(offer);
      });
      this.setState({ only_offers: offers });
    }
  })
  .then(() => {
    this.state.only_offers.forEach(offer => {
      firebase
        .database()
        .ref("Users")
        .child(offer.posterID)
        .once("value", snap => {
          offer["user"] = {
            fullName:
              snap.val().firstName +
              " " +
              snap.val().lastName.charAt(0) +
              ".",
            profileImgUrl: { uri: snap.val().profileImgUrl },
            averageRating: snap.val().reviews.asWorker.average,
            ratingCounter: snap.val().reviews.asWorker.count
          };
          console.log(offer);
          offers.push(offer);
        });
    });
    this.setState({ offers: offers, only_offers: null });
    console.log(this.state.offers);
  });

}