React JS - 使用地圖方法的組件中的Firebase顯示數據

我在編碼方面很新穎。我正在研究ReactJS，我試圖在Firebase中的數據庫中顯示所有不同類別的列表。你可以看到我寫的代碼如下：React JS - 使用地圖方法的組件中的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。我認爲，從火力的數據不是一個數組，也許這就是爲什麼我有這樣的消息錯誤...

這裏是我的數據庫看起來像在火力地堡： DB

也許數據庫不是一個數組[]但對象{}這是爲什麼？如果是的話，我怎樣才能將它轉換成一個數組。

來源

2017-05-30 Pierre Trzaska

只是控制檯登錄'this.state.datas'，看看它是什麼樣子。 Firebase沒有集合，因此它可能只是一個簡單的Object，其數字就是鍵。要轉換爲一個數組，看看這個問題：https://stackoverflow.com/questions/6857468/converting-a-js-object-to-an-array – VanDanic

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

來源

2017-05-30 19:06:54

React JS - 使用地圖方法的組件中的Firebase顯示數據

回答

相關問題