在reactjs中解析firebase查询数据答案

【问题标题】：Parsing firebase query data in reactjs在reactjs中解析firebase查询数据
【发布时间】：2019-04-25 10:06:08
【问题描述】：

我正在使用 firebase cloud firestore 来存储数据。我正在使用 reactjs 开发一个网络应用程序。我使用以下函数获取了文档：

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。

这是我显示完整的人员数组及其长度时的控制台输出。

长度应该是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>
        );
    }

【问题讨论】：

标签： reactjs firebase google-cloud-firestore

【解决方案1】：

这是因为对数据库的查询是异步的，并且您在此异步任务完成之前（即在 get() 方法返回的承诺解决之前）返回了 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);
  });

【讨论】：

但这会为每个对象返回 people 数组。还有如果我使用getPeoples() 函数返回persons 数组怎么办？就像const persons = getPeoples();。
我可以创建类似 Person 模型类的东西并在 reactjs 中创建 Person 类的对象数组吗？如果是的话，你能帮帮我吗

【解决方案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;
}

更新

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

【讨论】：