React + Firebase v3 - 如何获得对 firebase 的第二次引用以更新单个项目

Question

我正在尝试按照为 firebase v2 编写的 ToDo 教程学习 React+Firebase（使用 reactfire）。

现在使用新的 reactfire 文档，我了解了如何获取对 firebase v3 的引用，以便我可以列出和创建待办事项。

// 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

要更新特定项目，您确实需要获得对该特定项目的引用。您设置该参考的代码对我来说很好。

但是您不必调用 bindAsObject()，除非您试图在 UI 的其他地方显示该特定对象。如果只想更新数据，直接更新数据库即可。 UI 中的现有项目列表将自动反映该更新。

看到这个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});
},

React + Firebase v3 - 如何获得对 firebase 的第二次引用以更新单个项目

React + Firebase v3 - how to get a 2nd reference to firebase to update a single item

firebase

reactjs

firebase-realtime-database

reactfire