在React JS中从Firestore集合中获取数据 [英] Fetching data from firestore collection in react js

问题描述

我在firestore中有三个不同的数据库集合，我想从所有这些集合中提取数据到我的管理面板表中.我必须从学生集合中获取学生的详细信息，并从其他两个集合中获取反馈和详细信息，我必须从细节集合中获得反馈和其他信息.首先，我要获取学生的收集数据，并且在我的admin表中，我必须随学生的详细信息获取表中的反馈信息和额外的信息详细信息.问题是我正在获取未定义的文档，而在控制台中却找不到文档！消息.

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

推荐答案

您在此处使用的Firestore模块不正确.确保查看 Firestore文档作为基本示例.

Your usage of the Firestore module here is incorrect. Make sure to take a look at the Firestore Docs for basic examples.

在您的代码中:

async function getdata() {
    const ref = firebase
      .firestore()
      .collection("students").doc(); // THIS IS INVALID

doc 方法期望获取文档的名称-您当前的用法不会告诉Firestore您想要的文档

The doc method expects the name of a document to fetch - your current usage doesn't tell Firestore which document you want

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

更复杂的示例和用例可以在Firestore文档中找到，并经常在其他StackOverflow问题中进行讨论.

这篇关于在React JS中从Firestore集合中获取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！