[英]ReactJS, Firebase - Firestore, issue with the dynamic read of subcollections
I am a junior dev and at this moment am working on a forum done with ReactJS and Firebase.我是一名初级开发人员,目前正在一个由 ReactJS 和 Firebase 完成的论坛上工作。
I am having an issue with the dynamic read of subcollections.我对子集合的动态读取有疑问。
Here is a screen shot of my Firestore.这是我的 Firestore 的屏幕截图。
Topics have each a Topic document and a posts collection(well subcollection).每个主题都有一个主题文档和一个帖子集合(以及子集合)。
I have tried many ways to retrieve the data from subcollections dynamically, but none works.我已经尝试了很多方法来动态地从子集合中检索数据,但都没有用。 Been diving in stackoverflow, in articles but I am stuck.
一直在研究 stackoverflow,在文章中,但我被卡住了。 The queries for the Topics work well, and the posts too but not dynamically.
主题查询运行良好,帖子也运行良好但不是动态的。 If you could help I will be very grateful because searching for a solution has lasted for a while, so Thank you in advance.
如果您能提供帮助,我将不胜感激,因为寻找解决方案已经持续了一段时间,所以在此先感谢您。
These are my imports:这些是我的进口商品:
import firebase from 'firebase';
import * as admin from 'firebase-admin';
import * as functions from 'firebase-functions';
and in separate file there is the firebaseConfig and also firebase is initialized.在单独的文件中有 firebaseConfig 并且还初始化了 firebase。
These are the queries:这些是查询:
const db = firebase.firestore();
const dbPostsCollection = db.collection("topics");
const [data, setData] = useState([]);
My first and main query, which brings me closest to what I want as a result but can't retrieve the data.我的第一个也是主要的查询,它使我最接近我想要的结果但无法检索数据。
useEffect(() => {
dbPostsCollection.get().then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
console.log(doc.id, " => ", doc.data());
console.log(doc.id, " => ", db.collection("posts"));
});
});
}, []);
There is no error, below you'll see an screenshot of the console.logs没有错误,下面你会看到console.logs的截图
Second query:第二个查询:
useEffect(() => {
dbPostsCollection
.get()
.then(function (Document) {
Document.forEach((subCollectionSnapshot) => {
const postsData = subCollectionSnapshot.map(subcollection =>
subcollection.data())
console.log(postsData); // array of posts objects
setData(postsData);
});
}
);
}, []);
the error message: Unhandled Rejection (TypeError): subCollectionSnapshot.map is not a function错误信息:Unhandled Rejection (TypeError): subCollectionSnapshot.map is not a function
And the last query (there are more than 3 but I'll spare you from reading all my trials):最后一个查询(有 3 个以上,但我不会让你阅读我所有的试验):
useEffect(() => {
dbPostsCollection
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(doc.id, " => ", doc.data());
console.log(doc.id, " => ", db.collection("posts").get().then(querySnapshot => {
const data = querySnapshot.docs.map(doc => doc.data());
console.log(data);
}));
})
});
}, []);
This query doesn't return the Promise result, the result is undefined.此查询不返回 Promise 结果,结果未定义。 Thank you again for your help!
再次感谢你的帮助!
useEffect()
is by definition and requirement a SYNCHRONOUS function, and Firestore operations are ASYNCHRONOUS - likely your useEffect()
is exiting before any Firestore activity occurs. useEffect()
根据定义和要求是同步的 function,而 Firestore 操作是异步的 - 可能您的useEffect()
在任何 Firestore 活动发生之前退出。
A common hack is to create a self-executing closure inside the useEffect()
to effectively "spawn" a thread:一个常见的 hack 是在
useEffect()
中创建一个自执行闭包以有效地“生成”一个线程:
useEffect(() => {
(async () => {
await dbPostsCollection
.get()
.then((querySnapshot) => {
querySnapshot.forEach((doc) => {
console.log(doc.id, " => ", doc.data());
console.log(doc.id, " => ", db.collection("posts").get().then(querySnapshot => {
const data = querySnapshot.docs.map(doc => doc.data());
console.log(data);
}));
})
});
})();
}, []);
The (async () => {})
returns the anonymous ARROW FUNCTION; (async () => {})
返回匿名 ARROW FUNCTION; the await
indicates to wait for the following commend to execute (effectively waiting for the implied Promise to resolve); await
表示等待以下命令执行(有效等待隐含的 Promise 解析); the following ()
executes it.下面的
()
执行它。 The arrow function returns a Promise
, which the useEffect pretty much ignores, but the function does run to completion.箭头 function 返回
Promise
, useEffect 几乎忽略它,但 function确实运行完成。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.