Синтаксический анализ данных запроса в firebase

Question

Я использую Firebase Cloud Firestore для хранения данных.И я занимаюсь разработкой веб-приложения с использованиемactjs.Я получил документы, используя следующую функцию:

getPeoples() {
        let persons = [];
        firestore.collection("students")
            .get()
            .then(function (querySnapshot) {
                querySnapshot.forEach((doc) => {
                    var person = {};
                    person.name = doc.data().Name;
                    person.course = doc.data().Course;
                    persons.push(person);
                })
            });
        console.log(persons);
        return persons;
    }

Я получаю нужные данные, но когда я перебираю массив people , он говорит, что он имеет длину 0.

вот вывод консоли, когда я отображаю полный массив персон и его длину.

Длина должна быть 14, но она показывает 0. Пожалуйста, исправьте меня, что со мной не так?

Я хочу отобразить вывод в html внутри render() метода реагирующего компонента.

Вывод

 const peoples = this.getPeoples();
        console.log(peoples);

Это:

Полный метод рендеринга выглядит следующим образом:

render() {
        const peoples = this.getPeoples();
        console.log(peoples);
        return (
            <div className="peopleContainer">
                <h2>Post-Graduate Students</h2>
                {/* <h4>{displayPerson}</h4> */}
            </div>
        );
    }

Answer 1

Это связано с тем, что запрос к базе данных является асинхронным, и вы возвращаете массив persons до завершения этой асинхронной задачи (т.е. до разрешения обещания, возвращенного методом get() ).

Вы должны вернуть массив persons в then() следующим образом:

getPeoples() {
        let persons = [];
        return firestore.collection("students")
            .get()
            .then(function (querySnapshot) {
                querySnapshot.forEach((doc) => {
                    var person = {};
                    person.name = doc.data().Name;
                    person.course = doc.data().Course;
                    persons.push(person);
                })
                console.log(persons);
                return persons;
            });
    }

И вам нужно назвать его следующим образом, потому что он вернет обещание:

  getPeoples().then(result => {
    console.log(result);
  });

Посмотрите, что написано на консоли, если вы делаете:

  console.log(getPeoples());

  getPeoples().then(result => {
    console.log(result);
  });

Answer 2

Я не уверен, но, пожалуйста, попробуйте обновить

 getPeoples() {
    let persons = [];
    firestore.collection("students")
        .get()
        .then(function (querySnapshot) {
            querySnapshot.forEach((doc) => {
                var person = {};
                person.name = doc.data().Name;
                person.course = doc.data().Course;
                persons.push(person);
            })
        });
    console.log(persons);
    return persons;
}

до

getPeoples() {
    let persons = [];
    firestore.collection("students")
        .get()
        .then(querySnapshot => {
            querySnapshot.forEach((doc) => {
                persons.push({name = doc.data().Name,
                course = doc.data().Course
            })
        });
    console.log(persons);
    return persons;
}

Обновление

Извините, я думал, у вас проблемы с заполнением массива лиц в вашей функции. В любом случае, как упоминал Рено, запрос в вашей функции является асинхронным, поэтому результат не достаточно быстрый, чтобы отображаться при рендеринге. Я использую аналогичную функцию, и я нашел избыточный лучший способ справиться с этой ситуацией.