データベースアレイからのビューの取得と更新

Question

Firebaseデータベースから初期データをロードしようとしています。現在、データベースの1つのエントリの内容で状態を更新できます。しかし、配列を通してレンダリングされるものをより詳細に制御したいのですが、どのようにして配列に配列をバインドし、それを反復処理するのですか？ただし、componentDidMount（）を実行した後のみです。

これは私が受けていますエラーです：

firebase.js:283 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {home}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons. Check the render method of `Cases`. 

これは私のコードです：

import React, { Component } from 'react'; 
import * as firebase from 'firebase'; 

class Cases extends Component{ 

    constructor() { 
    super(); 
    this.state = ({ 
     cases: 10 
    }); 
    } 

    componentDidMount() { 

     const rootRef = firebase.database().ref('cases'); 
     const casesRef = rootRef.child('home'); 
     rootRef.on('value', snap => { 
     this.setState({ 
      cases: snap.val() 

     }) 
     }) 
    } 

    render() { 
    return (
    <div> 
      <h2>Cases</h2> 
      {this.state.cases} 
     </div>) 
    } 
} 

export default Cases; 

Answer 1

基本的にfirebaseから来ているデータを使用すると、オブジェクトを直接印刷するカントオブジェクト形式でありますあなたがあなたのオブジェクトをループする必要がありますし、配列を押して、反応の子に配列の値を印刷することができます