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

Question

我很反应和Firebase，我真的很难对阵列和对象我猜测你不能像我的数据格式化（或类型）一样使用.map。我已经查看了堆栈，但没有任何帮助（至少在我实施修复的努力方面）。

我正在尝试使用.map来映射来自firebase的结果，但我收到错误 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>
  );
}

Answer 1

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

  

Firebase没有对数组的本机支持。如果存储数组，它实际上存储为“对象”，整数作为键名。

阅读this，详细了解firebase将数据存储为对象的原因。

要映射对象，您可以执行类似

的操作

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

Answer 2

如上所述，Firebase snap.val（） - 是一个对象。

当您必须浏览对象时，您也可以只使用每个对象：

for(var key in this.state.firebasedata){
   <div key="{key}">
   <p>{this.state.firebasedata[key].video.name}</p>
   </div>
}

我还建议为它创建一个单独的方法，并在渲染中调用它。 希望这有帮助