在reactjs中解析firebase查询数据

我正在使用firebase cloud firestore存储数据。我正在使用reactjs开发一个web应用程序。我已使用以下功能获取文件：

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

我得到了所需的数据，但当我遍历persons数组时，它说它的长度为0

这里是显示完整的persons数组及其长度时的控制台输出

长度应为14，但显示为0。请纠正我有什么毛病

我想在react组件的

render（）

方法中以html格式显示输出

产量

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

render（）{
const peoples=this.getPeoples（）；
控制台.日志（人）；
返回(
研究生
{/*{displayPerson}*/}
);
}

这是因为对数据库的查询是异步的，并且在该异步任务完成之前（即，在方法返回的承诺解析之前），您正在返回

persons

数组

您应该返回

then（）

中的

persons

数组，如下所示：

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

---

我不确定，但请尝试更新您的

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

到

更新

---

抱歉，我认为您在函数中填充persons数组时有问题。无论如何，正如Renaud提到的，函数中的查询是异步的，因此结果不够快，无法在渲染时显示。我使用了类似的函数，我发现redux是处理这种情况的最佳方法。

但这会为每个对象返回persons数组。如果我使用

getPeoples（）

函数返回persons数组呢？就像

constpersons=getPeoples（）。我可以创建类似Person模型类的东西并在reactjs中创建Person类的对象数组吗？如果是的话，你能帮我吗
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;
}