はJSに反応 - 地図メソッド

Question

を持つコンポーネントでFirebase表示データを、私はコーディングにはかなり新しいです。私はReactJSに取り組んでいます。私はFirebaseから自分のデータベース内のすべての異なるカテゴリをリストに表示しようとしています。 あなたは、私が書いたコードの下に見ることができます：それはTypeError: this.state.datas.map is not a functionと言う

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

。私はfirebaseからのデータが配列でないかもしれないです、私はこのメッセージのエラーを持っている理由thatsのことを信じて ...

ここ

Firebaseのように私のデータベースがどのように見えるかです：たぶん、データベースが配列でない DB

[]しかし、オブジェクト{}なぜですか？はいの場合、どのようにして配列に変換できますか？

Answer 1

Firebase戻るsnapshot.val().categoryでデータベースからオブジェクト。あなたは配列としてそれを保存した場合、返されるオブジェクトは、次のようになります。

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

あなたがオブジェクトからすべての値を取得し、その値の配列を返すObject.values()を使用して、配列を、得ることができます。

私はこのように、データベースから保存書きます：ちょうどそれがどのように見えるかを確認するために `this.state.datas`をログコンソール

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