Как получить данные из трех коллекций firebase в одну таблицу в react js

У меня есть три разных коллекции в облачном хранилище, и я храню в этих коллекциях данные своего приложения обратной связи. Сначала я сохраняю данные студентов в коллекции студентов, после этого я сохраняю обратную связь студента в коллекции отзывов, и, наконец, я сохраняю некоторую дополнительную информацию в коллекциях деталей. Теперь я получаю все данные в своей таблице панели администратора. Я успешно получил данные сбора деталей, но не понимаю, как получить другую информацию в таблице и как я могу связать эти данные друг с другом?

import React, { useEffect, useState } from 'react';
import MaterialTable from 'material-table';
import AdminNavbar from '../../layout/AdminNavbar';
import firebase from '../../../config/fbConfig';

const Dashboard = (props) => {
  const [tableData, settableData] = useState();
  useEffect(() => {
    getdata();
  });

  console.info(props);
  async function getdata() {
     const ref = firebase
      .firestore()
      .collection("details");
    const snapshot = await ref.get();
    settableData(snapshot.docs.map(doc=>doc.data()))     
  }

  const tableCol = [
    {
      title: "Course expectations",
      field: "course_delivering_on_your_expectations"
    },
    {
      title: "Oppurtunities",
      field: "enough_opportunities_to_apply"
    },
    {
      title: "Explanation Clear",
      field: "explanation_of_concepts_clear"
    },
    {
      title: "Knowledge",
      field: "instructor_knowledgeable_about_the_topics"
    },
    {
      title: "Engaging",
      field: "instructors_delivery_engaging"
    },
    {
      title: "Learning",
      field: "learning_valuable_information"
    }
  ];
  
    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;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
31
1

Ответы 1

Невозможно получить 3 коллекции одновременно в одном запросе, потому что запросы Firestore неглубокие.

Вы можете использовать группы сбора для достижения своей цели. Если коллекции имеют разные идентификаторы, вам потребуется несколько чтений и присоединение к ним на стороне клиента.

Другие вопросы по теме