在reactjs中解析firebase查询数据

Posted 2021-03-27

我正在使用firebase云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;
    }

我正在获取所需的数据，但是当我遍历人员数组时，它表示它的长度为0。

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

长度应该是14，但它显示0.请纠正我有什么问题？

我想在反应组件的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>
        );
    }

答案

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

你需要按如下方式调用它，因为它将返回一个promise：

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

至

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

更新

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