Загрузить массив объектов с их идентификатором в :act native + firebase

Question

Я пришел из C ++, C, Python пробела, и я новичок, чтобы реагировать на собственный / JS / back-end мир.

У меня есть некоторые проблемы с загрузкой данных из firebase. Вот что я хочу:

Моя база данных:

• users: uid: postids []
• posts: postids: content

Я хочу загрузить массив postids [] от пользователя, а затем загрузить содержимое каждого postids [] в этом массиве (в соответствии с каждым postids в массиве postids []).

Вот мой код:

    _getPostsFromDatabase() {
    var docRef = firebase.firestore().collection("users").doc(firebase.auth().currentUser.uid);

    return docRef.get().then(function(doc) {
        if (doc.exists) {
          return doc.data()["posts"];
        }
    }).catch(function(error) {
        alert("Error getting document:", error);
    });
  }

  _loadPosts() {

    var new_posts = [];

    this._getPostsFromDatabase()
      .then(res => {

        var i;
        for (i = 0; i < res.length; i++) {

          firebase.firestore().collection("posts").doc(res[i])
            .onSnapshot(function(doc) {
                new_posts.push(doc.data());
                console.log(new_posts); --> This line print correct data 
            });
        }

      })
      .catch(error => console.log(error));

      console.log(new_posts); ---> This line print an empty array

  }

  componentDidMount() {
    this._loadPosts()
  }

Итак, я хочу следующее:

1. В componentDidMount я начинаю процедуру -> это работает
2. loadPosts загружает массив postids [] с Функция _getPostsFromDatabase () -> это работает
3. Затем я делаю для l oop до pu sh каждый объект в массиве, чтобы установить состояние в конце -> FAIL

На шаге 3 все ... Я сделал несколько журналов консоли для отладки, но существует огромная проблема в реальном времени, потому что все печатается случайным образом.

Как я могу заполнить свои new_posts массив в конце для l oop для setState. Может быть, я не прав с этим методом, или если нет, у меня должны быть некоторые проблемы с функцией Asyn c?

Есть ли эксперт, который поможет мне лучше понять, что находится внутри этого варианта использования?

Спасибо

Answer 1

В основном проблема заключается в том, что вы пытаетесь выполнить асинхронный код синхронным способом. Возможно, ваше решение ожидает выполнения всех обещаний.

_loadPosts() {

    this._getPostsFromDatabase()
      .then(res => {
       let promises = res.map(id => {
         return firebase.firestore().collection("posts").doc(id)
            .get().then(doc => doc.data())

        })
    Promise.all(promises).then(res => {console.log(res);})





  }

Answer 2

Ваша консоль будет записывать до l oop, вот почему вы получаете пустой массив, просто включите вашу консоль в ответ так:

 this._getPostsFromDatabase()
      .then(res => {

        var i;
        for (i = 0; i < res.length; i++) {

          firebase.firestore().collection("posts").doc(res[i])
            .onSnapshot(function(doc) {
                new_posts.push(doc.data());
                console.log(new_posts); --> This line print correct data 
            });
        }
        console.log(new_posts); ---->Include here
      })

Надеюсь, это поможет!