React JS - Firebase 使用 map 方法在组件中显示数据答案

【问题标题】：React JS - Firebase display data in component with map methodReact JS - Firebase 使用 map 方法在组件中显示数据
【发布时间】：2017-05-30 13:41:53
【问题描述】：

我是编码新手。我正在研究 ReactJS，我试图从 Firebase 的数据库中显示所有不同类别的列表。你可以在下面看到我写的代码：

    import Link from 'next/link'
    import React, { Component } from 'react'
    import firebase from 'firebase'

    export default class extends Page {

        constructor () {
          super()
          this.state = {
            datas: ''
          }
       }

        componentDidMount () {

          firebase.initializeApp(clientCredentials)

      // -------  Connect to the firebase DATABASE -------- ////

      firebase.database().ref().orderByChild("sectionIndex")
          .on("child_added",
            snapshot => {this.setState({datas: snapshot.val().category});},
            error => {console.log("Error: " + error.code);});

        }

        render () {

          return (
            <ul>
              {this.state.datas.map((data, i) => 
              <li key={i}> {data.category} </li>
            </ul>
          )
        }
      }

上面写着TypeError: this.state.datas.map is not a function。我相信来自 firebase 的数据不是一个数组，也许这就是我收到此消息错误的原因......

这是我的数据库在 Firebase 中的样子： DB

也许数据库不是 Array [] 而是 Object {}，这就是为什么？如果是，我怎样才能将其转换为数组。

【问题讨论】：

只需控制台日志this.state.datas 即可查看它的外观。 Firebase 没有集合，因此它可能只是一个以数字为键的简单对象。要转换为数组，请查看以下问题：stackoverflow.com/questions/6857468/…

标签： javascript arrays reactjs firebase firebase-realtime-database

【解决方案1】：

Firebase 从带有snapshot.val().category 的数据库返回对象。如果将其保存为数组，则返回的对象将如下所示：

{
 "1": "data",
 "2": "data2",
}

您可以使用Object.values() 获取您的数组，它从对象中获取所有值并返回该值的数组。

我将从数据库中写入保存，如下所示：

this.setState({datas: Object.values(snapshot.val().category)})

或将地图调用重写为：

Object.values(this.state.datas).map((data, i) => 
          <li key={i}> {data.category} </li>
)

【讨论】：