在reactjs中解析firebase查询数据

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在reactjs中解析firebase查询数据相关的知识,希望对你有一定的参考价值。

我正在使用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.请纠正我有什么问题?

enter image description here

我想在反应组件的render()方法中的html中显示输出。

的输出

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

它是:enter image description here

完整的渲染方法如下所示:

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是处理这种情况的最佳方法。

以上是关于在reactjs中解析firebase查询数据的主要内容,如果未能解决你的问题,请参考以下文章

如何与firebase建立内部连接并与其连接reactjs前端[关闭]

[在ReactJS中使用Firebase排序数据

无法显示从Firebase提取的数据到reactjs Webapp中

将图像从 ReactJS 上传到 Firebase v9 存储

如何将聊天中的加载图像替换为使用 ReactJS 上传到 Firebase 存储的图像?

如何访问'key'对象reactJS的对象属性