2017-08-23 7 views
1

私はfirebaseに格納された 'todos'を取得しようとしている単純なtodoアプリがあります。ここでは、関連するファイルがある...私は取得していますシンプルなtodoアプリとfirebaseのtodosの保存

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; 

エラーは次のとおりです。this.ref = base.syncState({

REBASE: The Firebase endpoint you are trying to listen to must be a string. Instead, got [object Object] 

。私はthis.refについて疑念を抱いていますが、代わりに何を入れるべきかはわかりません。任意のアイデアを高く評価

答えて

0

問題は、syncStatecomponentWillMountに呼び出すときに、最初にfirebaseエンドポイントである2つの引数を渡す必要があるということです。だから、解決策は下にあります...私は/ todosを最初の引数として追加しませんでした。

componentWillMount(){ 
    this.ref = base.syncState('/todos', { 
     context: this, 
     state: 'todos' 
    }); 
    } 
関連する問題