简单的反应todo应用程序和存储在火盆中的待办事项

时间:2017-08-23 15:51:03

标签: reactjs firebase

我有一个简单的待办事项应用程序,我试图让'todos'存储在firebase中。以下是相关文件......

base.js

import Rebase from 're-base';
import Firebase from 'firebase';

const app = Firebase.initializeApp({
      apiKey: "mykey",
    authDomain: "myapp.firebaseapp.com",
    databaseURL: "https://myapp.firebaseio.com",
});

const base = Rebase.createClass(app.database());

export default base;

TodoList.js

import React, { Component } from 'react';
import TodoItems from './TodoItems';
import TodoInput from './TodoInput';
import base from './base';

class TodoList extends React.Component {

  static propTypes = {
    todos: React.PropTypes.array
  };

  constructor(props) {
    super(props)
    this.state = { todos: this.props.todos || [] }
  }

  componentWillMount(){
    this.ref = base.syncState({
      context: this,
      state: 'todos'
    });
  }

  addTodo = (item) => {
    this.setState({todos: this.state.todos.concat([item])});
  }

  render () {
    return (
      <div>
        <h3>TODO List</h3>
        <TodoItems items={this.state.todos}/>
        <TodoInput addTodo={this.addTodo}/>
      </div>
    );    
  }
};

export default TodoList;

我得到的错误是:

REBASE: The Firebase endpoint you are trying to listen to must be a string. Instead, got [object Object]
this.ref = base.syncState({中的

。我对this.ref持怀疑态度,但我不确定要替代它。任何想法都赞赏。

1 个答案:

答案 0 :(得分:1)

我遇到的问题是,在variation_id中调用syncState时,我需要传递两个参数,第一个是firebase端点。所以解决方案如下......不是我添加/ todos作为第一个参数。

componentWillMount