React.js .map 不是函数，映射 Firebase 结果

Question

我对 React 和 Firebase 非常陌生，我真的很纠结数组和对象，我猜你不能使用.map我的数据格式化（或类型）的方式。我已经查看了堆栈，但没有任何帮助（至少在我实施修复程序的努力中）。

我试图用来.map映射来自 firebase 的结果，但我收到错误TypeError: this.state.firebasedata.map is not a function。

获取数据：

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>
  );
}

Answer 1

这是因为firebase不将数据存储为数组，而是存储为对象。所以你得到的响应是一个对象。

Firebase 没有对数组的原生支持。如果你存储一个数组，它真的被存储为一个“对象”，以整数作为键名。

阅读本文以了解有关 firebase 为何将数据存储为对象的更多信息。

要映射对象，您可以执行以下操作

Object.keys(myObject).map(function(key, index) {
   console.log(myObject[key])
});