Question

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

2018-04-05

3178

javascript reactjs

我对 React 和 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 has no native support for arrays. If you store an array, it really gets stored as an "object" with integers as the key names.

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

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

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

Answer 2

对于现在来到这里的任何人，您只需输入 snapshot.docs 即可获取相关集合中所有文档的数组。

例如，如果您想从集合 users 中获取所有用户对象，您可以执行以下操作：

const getAllUsers = async () => {
    const usersSnapshot = await db.collection('users').get()
    const allUsers = usersSnapshot.docs.map(userDoc => userDoc.data())
    return allUsers
}

Answer 3

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

当您必须遍历对象时，您也可以简单地对每个对象使用：

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

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