Невозможно получить коллекцию Firebase с React - PullRequest
Новая
       16

Невозможно получить коллекцию Firebase с React

0 голосов
/ 07 апреля 2019

Я использую React hooks + firebase.

В firebase я создал коллекцию под названием "проекты"

enter image description here

Когда я пытаюсь сохранить данные в консоли: 

const Dashboard = () => {
  const { firebase } = useContext(GlobalContext);

  return (
    <div className="container">
      {console.log(firebase.db.collection("projects"))}
    </div>
  );
};

я получаю следующий объект:

enter image description here

Разве не должны быть в состоянии увидеть мои данные?

Ниже приведены мои firebase и контекст настроены

firebase.js 

import app from "firebase/app";
import "firebase/auth";
import "firebase/firebase-firestore";

const config = {//mydata}

class Firebase {
  constructor() {
    app.initializeApp(config);
    this.auth = app.auth();
    this.db = app.firestore();
  }
}

export default new Firebase();

context.js 

import React, { useReducer } from "react";
import { projectReducer } from "./reducers";
import firebase from "../components/firebase/firebase";

export const GlobalState = props => {
  const [projects, setProjects] = useReducer(projectReducer, []);

  return (
    <GlobalContext.Provider
      value={{
        projects,
        firebase
      }}
    >
      {props.children}
    </GlobalContext.Provider>
  );
};

1 Ответ

2 голосов
/ 07 апреля 2019

Ключ вашего взаимодействия с Firestore в вашем коде выглядит следующим образом: 

firebase.db.collection("projects")

Этот код создает ссылку на коллекцию projects в Firestore.Он не извлекает какие-либо данные из базы данных.

Чтобы получить данные, вам необходимо подключить слушателя к коллекции.Из документации Firestore о получении документов из коллекции : 

db.collection("cities").where("capital", "==", true)
    .get()
    .then(function(querySnapshot) {
        querySnapshot.forEach(function(doc) {
            // doc.data() is never undefined for query doc snapshots
            console.log(doc.id, " => ", doc.data());
        });
    })
    .catch(function(error) {
        console.log("Error getting documents: ", error);
    });

Вам нужно сделать что-то подобное в своем коде.

Обычно в проектах React вы сохраняете данные в состоянии компонента, вызывая setState(...) в обратном вызове then(), а затем визуализируете содержимое из состояния в вашем JSX.

...