IT技术 - 无法使用 React 获取 firebase 集合 - 吾爱随笔录

无法使用 React 获取 firebase 集合

IT技术 reactjs firebase google-cloud-firestore react-hooks

2021-04-30 07:52:49

我正在使用 React hooks + firebase。

在 firebase 中，我创建了一个名为“projects”的集合

当我尝试控制台记录数据时：

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

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

我得到以下对象：

应该看不到我的数据吗？

以下是我设置的 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();

上下文.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个回答

您如何在代码中与 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 中呈现来自状态的内容。

其它你可能感兴趣的问题

上一篇使用 Jest 测试时 componentWillUpdate 上的 nextState 不正确（也使用 react-router 包装器）下一篇当所有嵌套的 Axios 调用完成时 ReactJS setState