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

Question

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

Answer 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>
)