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创建一个新的refbase to 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的其他位置显示该特定对象。如果您只想更新数据，只需直接更新数据库即可。用户界面中现有的项目列表将自动反映该更新。

请参阅此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以更新单个项目

1 个答案: