[英]How do I put my Documents from my Collection into an array of objects with their own fields getting from Google Firestore?
I'm creating a React app that is storing it's Pokedex entries, along with its static assets on Google Firestore.我正在创建一个 React 应用程序,它在 Google Firestore 上存储它的 Pokedex 条目以及它的 static 资产。
I have it setup like this:我有这样的设置:
The goal is to retrieve these documents that are Pokemon and return them in an array of objects similar to what I can do locally.目标是检索这些 Pokemon 文档并将它们返回到类似于我可以在本地执行的对象数组中。 I am able to get console logs of the entries back, but I can't seem to display any of them in the rendering process and I believe it's due to them not being in an array.我能够取回条目的控制台日志,但我似乎无法在渲染过程中显示它们中的任何一个,我相信这是由于它们不在数组中。
[{"index": "001", "name": "bulbasaur"},
{"index": "002", "name": "ivysaur"},
{"index": "003", "name": "venesaur"},
{"index": "004", "name": "charmander"},
{"index": "005", "name": "charmeleon"},
{"index": "006", "name": "charizard"},
{"index": "007", "name": "squirtle"},
{"index": "008", "name": "wartortle"},
{"index": "009", "name": "blastoise"},
{"index": "010", "name": "caterpie"},
{"index": "011", "name": "metapod"},
{"index": "012", "name": "butterfree"},
{"index": "013", "name": "weedle"},
{"index": "014", "name": "kakuna"},
{"index": "015", "name": "beedrill"}]
Is my output.是我的 output。 My code is looking like this to retrieve the documents from the "pokedex" collection.我的代码看起来像这样从“pokedex”集合中检索文档。 I want to be able to perform a function to list these out using solo entries that can be displayed using their fields such as index number and name as shown above in the output, but I can't access it in the rendering process when I use "this.state.pokemon[0]" for example.我希望能够执行 function 以使用单独条目列出这些条目,这些条目可以使用索引号和名称等字段显示,如 output 中所示,但我在使用时无法在渲染过程中访问它例如“this.state.pokemon[0]”。
state = {
pokemon: null
}
componentDidMount() {
db.collection('pokedex')
.get()
.then( snapshot => {
const testList = []
snapshot.forEach(doc => {
const data = doc.data();
testList.push(data);
})
this.setState({pokemon: testList})
console.log(this.state.pokemon)
})
.catch (error => console.log(error))
}
Thank you谢谢
Try the code update below (assuming you're using a React class component), including setting the initial pokemon state to an empty array.尝试下面的代码更新(假设您使用的是 React class 组件),包括将初始口袋妖怪 state 设置为空数组。 You will need to be explicit about which document fields you want to pull in (ie, you'll need to replace " name
", " element
", " HP
" with your own fields)您需要明确说明您想要提取哪些文档字段(即,您需要将“ name
”、“ element
”、“ HP
”替换为您自己的字段)
constructor() { super(); this.state = { pokemon: [], }; } componentDidMount() { this.unsubscribe = db.collection('pokedex').onSnapshot(this.getCollection); } componentWillUnmount() { this.unsubscribe(); } getCollection = querySnapshot => { const testList = []; querySnapshot.forEach(res => { const { name, element, HP } = res.data(); testList.push({ key: res.id, res, name, element, HP }); }); this.setState({ pokemon: testList }); };
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.