React 从数据库数组中获取和更新视图答案

【问题标题】：React fetching and updating view from database arrayReact 从数据库数组中获取和更新视图
【发布时间】：2016-12-29 18:24:02
【问题描述】：

我正在尝试从 Firebase 数据库加载我的初始数据。目前，我可以使用数据库中一个条目的内容来更新状态。但是，我希望更好地控制通过数组呈现的内容，但是如何将案例绑定到数组并在反应中迭代这些，但仅在执行 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;

【问题讨论】：

你能把你的this.state.cases的内容发过来吗？
嗨，谢尔盖，感谢您抽出宝贵时间！我调试了一堆，发现了更多信息。但是，我提出了一个新问题以更清楚地提出问题。如果你想看看我把所有的信息上传到这个线程：link

标签： arrays sorting reactjs firebase firebase-realtime-database

【解决方案1】：

基本上，来自 firebase 的数据是对象形式，您不能直接将对象打印为子响应，您必须在对象上循环，然后推入数组，然后您可以在响应子节点上打印数组值

【讨论】：