如何使用reactJS仅获取Firebase/Firestore中的文档列表 [英] How to get ONLY list of documents in Firebase/Firestore using reactJS

问题描述

我想问些什么，我需要从firebase中获取数据，但只获取文档列表

i want to ask something, i need to fetch data from firebase, BUT only the list of the documents

赞

我已经尝试过了，但现在被卡住了，这是我的代码:

i've already tried, and i'm stuck (at the moment), here's my code:

this.ref3 = firebase
      .firestore()
      .collection("pendatang")
      .orderBy("timestamp", "desc")
      .limit(10);

componentDidMount = async () => {
    this.unsubscribe = this.ref3.onSnapshot(this.onCollectionUpdate2);
  };

onCollectionUpdate2 = (querySnapshot) => {
    const tanggal = [];
    querySnapshot.forEach((doc) => {
      tanggal.push({
        tanggal: doc.id,
        doc, // DocumentSnapshot
      });
    });
    this.setState(
      {
        tanggal,
      },
      () => {
        console.log(this.state.tanggal);
      }
    );
  };

实际上我没有得到错误，我得到了数组，但是好像没有得到任何东西，当我使用 map 时，它在状态内没有出现任何东西，这就是我在获取图片

Actually i didn't get error, i got the array but it's like didn't get any, when i use map, it didn't appear anything inside the state, this is what i got after the fetch The Image

我尝试了 map 它:

{this.state.tanggal.map((item, key) => (
                        <Chip
                          avatar={<Avatar>M</Avatar>}
                          label={item.tanggal}
                          onClick={() => this.ChipsClicked(24)}
                        />
                      ))}

我得到了什么

没什么

我真的需要帮助人员:(而且我对firebase很好奇，我非常感谢每个想要帮助我的人:)

I really need help guys :( and I'm actually very curious about firebase, I really appreciate everyone who wants to help me :)

推荐答案

如您的Firebase控制台屏幕截图所示，该文档在Firebase控制台中以斜体显示:这是因为此文档(仅在控制台中)作为一个或多个子集合的容器"存在，而不是真实"文档.

As shown in your Firebase console screenshot, the document is displayed with an italic font in the Firebase console: this is because this document is only present (in the console) as "container" of one or more sub-collection but it is not a "genuine" document.

如果直接在 col1 集合下创建具有完整路径 doc1/subCol1/subDoc1 的 subDoc1 文档，则不会有任何中间文档已创建(即没有 doc1 文档).

If you create a subDoc1 document directly under a col1 collection with the full path doc1/subCol1/subDoc1, no intermediate documents will be created (i.e. no doc1 document).

Firebase控制台以斜体显示这种容器"(或占位符")，以便具体化"层次结构，并允许您导航到 subDoc1 文档，但 doc1文档在Firestore数据库中不存在.

The Firebase console shows this kind of "container" (or "placeholder") in italic in order to "materialize" the hierarchy and allow you to navigate to the subDoc1 document but doc1 document doesn't exist in the Firestore database.

因此，如果我们在 col1 集合下有一个 doc1 文档

So if we have a doc1 document under the col1 collection

col1/doc1/

和 subCol1 (子)集合下的另一个 subDoc1 (子)集合

and another one subDoc1 under the subCol1 (sub-)collection

col1/doc1/subCol1/subDoc1

...实际上，从技术角度来看，它们根本不相关.他们只是分享他们的部分路径，而没有别的.

... actually, from a technical perspective, they are not at all relating to each other. They just share a part of their paths but nothing else.

您可以很好地创建 subDoc1 ，而无需创建 doc1 .

You can very well create subDoc1 without creating doc1.

这的另一个副作用是，如果删除文档，则其子集合仍然存在.同样，子集合文档并未真正链接到父文档.

Another side effect of this is that if you delete a document, its sub-collection(s) still exist. Again, the subcollection docs are not really linked to the parent document.

因此，在您的情况下，如果需要在 pendatang 集合中包含真实文档，则需要在创建第一个子集合文档的同时创建它们.

So, in your case, if you need to have genuine docs in the pendatang collection, you need to create them at the same time you create the first subcollection doc.

此外，请注意，Cloud Firestore的读取浅:在集合中查询文档不会从子集合中提取数据.

Also, note that Cloud Firestore has shallow reads: querying for documents in a collection doesn't pull in data from subcollections.

这篇关于如何使用reactJS仅获取Firebase/Firestore中的文档列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！