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

我在编码方面很新。我正在使用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 {}，这就是为什么？如果是，如何将其转换为数组。

最佳答案

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

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

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

我将这样写从数据库保存：

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

或将地图调用重写为：

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