Question

我正在尝试从Firebase数据库加载我的初始数据。目前，我可以使用数据库中一个条目的内容更新状态。但是我希望能够更好地控制通过数组呈现的内容，但是如何将case绑定到数组并在响应中迭代这些内容，但仅在执行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的数据是对象形式你不能直接打印对象作为一个孩子反应你必须循环你的对象然后推入数组然后你可以打印数组值的反应儿童

反应从数据库数组中获取和更新视图

1 个答案: