React + Firebase v3 - firebaseへの2番目の参照を取得して単一のアイテムを更新する方法

Question

Firebase v2用に書かれたToDoチュートリアルの後、React + Firebase（リアクションを使用）を学ぼうとしています。

新しいreactfireドキュメントを使用して、firebase v3への参照を取得する方法を見て、todoアイテムをリストして作成できるようにしました。

// app.jsx 

var Firebase = require('firebase'); 
var Header = require('./header'); 

var config = { 
    apiKey: "...", 
    authDomain: "...firebaseapp.com", 
    databaseURL: "https://...firebaseio.com" 
}; 

firebase.initializeApp(config); 

var App = React.createClass({ 
    ..., 

    getInitialState(){ //... }, 

    componentWillMount(){ 
     var ref = firebase.database().ref("items"); 
     this.bindAsObject(ref, "items"); 
     ref.on('value', this.handleDataLoaded); 
    }, 

    render: function() { 
     return (
      <div> 
       ... 
       <Header itemsStore={this.firebaseRefs.items}/> 
       ... 
      </div> 
     ) 
    } 

しかし、今、私は一つのアイテムに更新アクションをしたい、と私はちょうどその項目のidを使用してfirebaseするための新しい参照を作成する必要が聞いています。

これは本当ですか？

ここでは、docsに基づいて試したことがあります。

// list-item.jsx 

componentWillMount(){ 
    var ref = firebase.database().ref().child("items/" + this.props.item.key); 
    this.bindAsObject(ref, "item"); 
}, 

handleDoneChange(event){ 
    console.log(this.state.item); // --------------------> Object {done: false, text: "second task", .key: "-KOlfbvw52_47CYiLlxr"} 
    this.setState({done:event.target.checked}); 
    this.state.item.update({done: event.target.checked}); // --> is not a function 
}, 

実行中の例はありますか？

Answer 1

特定のアイテムを更新するには、その特定のアイテムへの参照を取得する必要があります。その参照を設定するためのコードは私にとってはうまく見えます。

しかし、特定のオブジェクトをUIの他の場所に表示しようとしている場合を除き、bindAsObject()に電話する必要はありません。データを更新するだけの場合は、データベースを直接更新することができます。 UI内の既存のアイテムリストには、その更新が自動的に反映されます。

このsnippet from the TODO example for ReactFire参照してください：あなたのコードでは

<TodoList2 items={ this.state.items } removeItem={ this.removeItem } /> 

更新のためのコードは、単純に次のようになります：

removeItem: function(key) { 
    var firebaseRef = firebase.database().ref('todoApp/items');; 
    firebaseRef.child(key).remove(); 
}, 

JSXを

handleDoneChange(key){ 
    var ref = firebase.database().ref().child("items/") 
    ref.child(key).update({done: event.target.checked}); 
},