Question

我正在跟踪Tyler McGinnis关于使用firebase on react的教程，但我无法将我的应用程序同步到我的firebase。该教程最初不是在ES6上完成的。这是代码的核心：

var Profile = React.createClass({
  mixins: [ReactFireMixin],
  getInitialState: function(){notes: ['some','notes']},

  componentDidMount: function(){
    this.ref = new Firebase('https://github-note-taker.firebaseio.com/');
    var childRef = this.ref.child(this.props.params.username);
    this.bindAsArray(childRef, 'notes');
  }
  ...
  //render
  <Notes username={this.props.params.username} notes={this.state.notes} />

这会将notes同步到FB数据库并呈现音符数组

我有一个填充了大量数据的firebase数据库。当我访问该页面时，我的Note组件仅显示初始状态，而不是firebase数据。我是Firebase的新手。经过研究，我想出了它的ES6版本：

var base = Rebase.createClass({
  apiKey: ...,
  authDomain: ...,
  databaseURL: ...,
  storageBucket: ...,
  messagingSenderId: ...
});

class Profile extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      notes: [1,2,3],
     }
  }
  init(){
    this.ref = base.syncState(`/profile/${this.props.routeParams.username}`, {
      context: this,
      asArray: true,
      state: 'notes'
    });

    helpers.getGithubInfo(this.props.routeParams.username)
      .then((dataObj) => {
        this.setState({
          bio: dataObj.bio,
          repos: dataObj.repos
        });
      });

  }
  componentDidMount(){
    this.init();
  }
  componentWillUnmount(){
    base.removeBinding(this.ref);
  }
  componentWillReceiveProps(){
    base.removeBinding(this.ref);
    this.init();
  }
  //render
  <Notes notes={this.state.notes} />

我确信我会错过一些东西，但我不确定它是什么。如何使用ES6将Firebase同步到我的React应用程序？

如何使用ES6将数据从Firebase同步到React？

0 个答案: