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()获取数组，它从object获取所有值并返回该值的数组。

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

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

或者将地图调用重写为：

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

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

1 个答案: