React.js .map不是函数，而是映射Firebase结果
React.js .map不是函数，而是映射Firebase结果
提问于 2018-04-05 05:48:08
我对react和Firebase非常陌生，我真的很难处理数组和对象，我猜您不能使用.map来处理我的数据的格式化方式(或类型)。我查看了堆栈，但是没有任何帮助(至少在我实现修复的糟糕努力中是如此)。
我试图使用.map来映射来自火基的结果，但是我得到了错误TypeError: this.state.firebasedata.map 不是一个函数。
获取数据：
componentWillMount(){
this.getVideosFromFirebase()
}
getVideosFromFirebase(){
var youtubeVideos = firebase.database().ref('videos/');
youtubeVideos.on('value', (snapshot) => {
const firebasedata = snapshot.val();
this.setState({firebasedata});
});
}
有关国家：
constructor(props){
super(props);
this.state = {
firebasedata: []
}
};渲染中的.map：
render(){
return(
<div>
{this.state.firebasedata.map((item) =>
<div key="{item}">
<p>{item.video.name}</p>
</div>
)}
</div>
);
}回答 3
Stack Overflow用户
回答已采纳
发布于 2018-04-05 05:57:03
这是因为firebase不将数据存储为数组，而是存储为对象。所以你得到的反应是一个物体。
Firebase不支持数组。如果存储一个数组，它实际上被存储为一个以整数作为键名的“对象”。
请阅读这，了解为什么firebase将数据存储为对象。
要映射对象，您可以执行以下操作
Object.keys(myObject).map(function(key, index) {
console.log(myObject[key])
});Stack Overflow用户
发布于 2022-01-04 17:05:22
对于现在来到这里的任何人，只需输入snapshot.docs即可获得相关集合中所有文档的数组。
例如，如果希望从集合users获取所有用户对象，可以执行以下操作：
const getAllUsers = async () => {
const usersSnapshot = await db.collection('users').get()
const allUsers = usersSnapshot.docs.map(userDoc => userDoc.data())
return allUsers
}Stack Overflow用户
发布于 2018-04-05 08:15:21
如上所述，Firebase snap.val() -是一个对象。
当您必须遍历对象时，您也可以简单地为每个对象使用：
for(var key in this.state.firebasedata){
<div key="{key}">
<p>{this.state.firebasedata[key].video.name}</p>
</div>
}我还建议为它创建一个单独的方法，并在render中调用它。希望这能有所帮助
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49664994
复制相关文章
相似问题
腾讯云开发者
