Javascript 使用Firestore文档和收集数据
我在Firestore中有一些具有以下收集结构的文档Javascript 使用Firestore文档和收集数据,javascript,reactjs,firebase,google-cloud-firestore,Javascript,Reactjs,Firebase,Google Cloud Firestore,我在Firestore中有一些具有以下收集结构的文档 _fl_meta_: Object { createdBy: "Kz5vTvzlmGhRCxqKuDhrvvANqPe2", docId: "76qlSYWItERvJVnLKSDt", env: "production", … } author: "asd" content: "last 1" date: "2019-06-19T12:00:00-07:00" id: "76qlSYWItERvJVnLKSDt" imageDeck: Ar
_fl_meta_: Object { createdBy: "Kz5vTvzlmGhRCxqKuDhrvvANqPe2", docId: "76qlSYWItERvJVnLKSDt", env: "production", … }
author: "asd"
content: "last 1"
date: "2019-06-19T12:00:00-07:00"
id: "76qlSYWItERvJVnLKSDt"
imageDeck: Array [ {…} ]
order: 0
parentId: 0
status: "published"
summary: "last 1"
title: "last 1"
我试图循环浏览我的文档并将其收集的数据呈现给我的组件,但我遇到了问题
我的查询
const db = firebase.firestore();
db
.collection('fl_content')
.where('_fl_meta_.schema', '==', 'blog')
.get()
.then(querySnapshot => {
querySnapshot.forEach(doc => {
console.log(doc.data());
// let results = Object.keys(doc.data()).map(function (key) {
// return [String(key), doc.data()[key]];
// })
// this.setState({ cards: results });
});
})
.catch(error => {
console.log("Error getting documents: ", error);
});
该查询从
firestore
输出上述集合。感谢您的帮助获取您的查询快照
并将其映射为包含文档的对象数组
const querySnapshot = firebase.firestore().collection('fl_content')
.where('_fl_meta_.schema', '==', 'blog').get()
.then((querySnapshot) => {
// The following line will result in an array of objects (each object is your document data)
const yourDocuments = querySnapshot.docs.map((doc) => doc.data());
this.setState({cards: yourDocuments});
})
.catch((error) => {
console.log(error);
});
然后,您可以执行以下操作:
// INSIDE YOUR RENDER METHOD
const cardItems = this.state.cards.map((item,index) =>
<CardComponent key={index}>
{item.name} // Here you can access and display the fields of your documents
</CardComponent>
);
return(
<SomeContainerComponent>
{cardItems}
</SomeContainerComponent>
);
//在渲染方法中
const cardItems=this.state.cards.map((项目,索引)=>
{item.name}//您可以在这里访问和显示文档的字段
);
返回(
{cardItems}
);
你能给我解释一下它是如何工作的吗?对于所有这些react内容来说,它还是新的,而且让我很困惑,你需要创建一个常量来存储/加载一个组件,以便在另一个组件中呈现它。。。。哈哈……那个cardItems
变量正在存储一个包含一堆的数组。这就是JSX标记,该数组的每个元素都被转换成如下内容:例如return(aaa)代码>被翻译成返回React.createElement(“div”,null,“aaa”)代码>基本上是在屏幕上创建和渲染的。这将发生在数组的每个元素carditem
,因此所有元素都将相应地呈现。看看