React + Firebase v3 - как получить 2-ю ссылку на firebase для обновления одного элемента

Question

Я пытаюсь изучить React + Firebase (с помощью reactfire) после учебника ToDo, написанного для firebase v2.

Теперь, используя новые документы 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> 
     ) 
    } 

Но теперь я хочу сделать обновления действия на один пункт, и я сказал, что я должен создать новый реф в 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

Чтобы обновить определенный элемент, вам действительно нужно получить ссылку на этот конкретный элемент. Вы код для настройки этой ссылки выглядит хорошо для меня.

Но вам не нужно звонить bindAsObject(), если вы не пытаетесь показать этот конкретный объект в другом месте вашего пользовательского интерфейса. Если вы просто хотите обновить данные, вы можете просто обновить базу данных напрямую. Существующий список элементов в пользовательском интерфейсе автоматически отразит это обновление.

Смотреть это snippet from the TODO example for ReactFire:

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

JSX:

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

В коде код для обновления может быть просто:

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