javascript - ReactFire - 将 Firebase 绑定(bind)到 React 状态时获取 'Objects are not valid as a React child'

Question

我正在尝试使用以下教程将 Firebase 中的数据绑定(bind)到名为“notes”(数组)的 react 状态 here :

var Profile = React.createClass({
  mixins: [Router.State, ReactFireMixin],

  getInitialState: function() {
    return {
      bio: [],
      repos: [],
      notes: []
    }
  },

  componentDidMount: function() {
    this.ref = new Firebase('https://myname-github-notetaker.firebaseio.com');
    var childRef = this.ref.child(this.getParams().username);
    this.bindAsArray(childRef, 'notes');
  },

...

});

我在控制台中收到此错误:

Uncaught Error:
Invariant Violation: Objects are not valid as a React child (found: object with keys {.value, .key}).
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.

这是什么意思？ this.bindAsArray(childRef, 'notes'); 行是否工作不正常？

Answer 1

firebase 返回一个对象数组。当你这样做的时候

{this.props.notes.map(function(note,index){
 return <li key={index}>{note}</li>
})}

{note} 这是一个对象，我认为你需要通过对象键再次循环或使用 https://www.npmjs.com/package/react-addons-create-fragment在您的应用中。

像这样

var addons = require('react-addons-create-fragment');
return <li key={index}>{addons(note)}</li>