[英]Fetching data from firestore collection in react js
I have three different collections of database in firestore and i want to fetch the data from all these collections into my admin panel table.我在 Firestore 中有三个不同的 collections 数据库,我想将所有这些 collections 中的数据提取到我的管理面板表中。 From the students collections i have to get the details of the students and from other two collections feedback and the details, i have to get feedback and extra informations from the details collections.
从学生 collections 我必须得到学生的详细信息,从其他两个 collections 反馈和细节,我必须从细节 collections 获得反馈和额外信息。 At the first i am fetching my students collection data, and inside my admin table i have to fetch feedback and the extra informations details in the table along the students details.
首先,我正在获取我的学生收集数据,在我的管理表中,我必须获取反馈和表中的额外信息详细信息以及学生详细信息。 The problem is i am getting undefined document, and in the console i am getting No doc found.
问题是我得到未定义的文档,并且在控制台中我得到没有找到文档。 message.
信息。
My code looks like this.
import React, { useEffect, useState } from 'react';
import MaterialTable from 'material-table';
import AdminNavbar from '../../layout/AdminNavbar';
import firebase from '../../../config/fbConfig';
const Dashboard = () => {
const [tableData, settableData] = useState({
id: "",
name: "",
course: "",
email: "",
phone: "",
createdAt:""
});
useEffect(() => {
getdata();
}, []);
async function getdata() {
const ref = firebase
.firestore()
.collection("students").doc();
ref.get().then((doc) => {
const feedbackdata = doc.data();
console.log(feedbackdata);
if (doc.exists) {
settableData({
id: feedbackdata.id,
name: feedbackdata.name,
course: feedbackdata.course,
email: feedbackdata.email,
phone: feedbackdata.phone,
createdAt: feedbackdata.createdAt
});
} else {
console.log("No doc found!");
}
});
}
const tableCol = [
{
title: "Student ID",
field: "id"
},
{
title: "Name",
field: "name"
},
{
title: "Course",
field: "course"
},
{
title: "Email",
field: "email"
},
{
title: "Phone",
field: "phone"
},
{
title: "Submitted at",
field: "createdAt"
}
];
return (
<>
<AdminNavbar />
<div className="table-div">
<MaterialTable
title={"Student's Feedback"}
data={tableData}
columns={tableCol}
options={{
headerStyle: {
backgroundColor: "#01579b",
color: "#FFF"
},
exportButton: true,
selection: false,
search: true
}}
/>
</div>
</>
);
}
export default Dashboard;
Your usage of the Firestore module here is incorrect.您在此处对 Firestore 模块的使用不正确。 Make sure to take a look at the Firestore Docs for basic examples.
请务必查看Firestore 文档以获取基本示例。
In your code:在您的代码中:
async function getdata() {
const ref = firebase
.firestore()
.collection("students").doc(); // THIS IS INVALID
The doc
method expects the name of a document to fetch - your current usage doesn't tell Firestore which document you want doc
方法需要获取文档的名称 - 您当前的使用不会告诉 Firestore 您想要哪个文档
// You want a particular document
const ref = firebase
.firestore()
.collection("students").doc("<documentIdHere>");
// You want to get the list of documents in the student collection
const ref = firebase
.firestore()
.collection("students");
const snapshot = await ref.get();
snapshot.forEach(doc => {
console.log(doc.id, '=>', doc.data());
});
More complex examples and use cases can be found in the Firestore Docs and are often discussed in other StackOverflow questions.更复杂的示例和用例可以在 Firestore 文档中找到,并且经常在其他 StackOverflow 问题中讨论。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.