Question

使用 React + Firebase，如何修改嵌套查询内的状态？

2017-02-27

722

javascript reactjs firebase firebase-realtime-database

我目前像这样初始化我的状态：

getInitialState: function () {
    return {
        conversations: {},
        messages: {},
        availableConversations: {}
    }
},

如果我执行类似操作：

convosRef.on('value', snapshot => {
        this.setState({ conversations: snapshot.val() });
    });

它按预期工作...但是：

users: {
    uid: {
        conversations: {
            conversationid: true,
            conversationid2: true
        }
    }
}

我成功获取了所需的对象：

userSnapshot.child('conversations').forEach(function (conversationKey) {
            var conversationRef = database.ref('conversations').child(conversationKey.key);
            conversationRef.on('value', function (conversationsSnapshot) {
                var conversation = conversationsSnapshot.val();
                conversationLoadedCount = conversationLoadedCount + 1;
                myObject[conversationKey.key] = conversation;
                // console.log(conversationKey.key);
                //this.state.conversations = conversation;

                if (conversationLoadedCount === conversationCount) {
                    console.log("We've loaded all conversations");

                }
            });
            this.setState({ conversations: myObject });
        });
    });

但是。我收到两个错误，我无法影响状态：第一个错误： `FIREBASE 警告：用户回调引发异常。 TypeError：无法读取 null 的属性“setState”``

略有相似之处： 未捕获的 TypeError：无法读取 null 的属性“setState”

我根据这个出色的答案编写了代码，但毫无成效： Firebase 双向关系/检索数据

这在 componentDidMount 函数 内运行。

关于如何影响状态有什么建议吗？

Answer 1

在 ES6 中如果你使用粗箭头函数，这会更加简洁，并且“this”会被绑定，例如：

   userSnapshot.child('conversations').forEach((conversationKey) => {
            var conversationRef = database.ref('conversations').child(conversationKey.key);
            conversationRef.on('value', (conversationsSnapshot) => {

Answer 2

我通过尝试绑定它找到了解决问题的方法。解决方案是每当我调用 firebase.database().ref() 时使用 bind(this) 。这是最后的片段，希望它能帮助像我这样的可怜的人，如果有人有更好的答案或关于如何改进这一点的解释，请告诉我：

var myObject = {}; usersRef.on('value', function (userSnapshot) {

        // First we get the qty of conversations.
        var conversationCount = userSnapshot.child('conversations').numChildren();
        // we initialize an empty counter
        var conversationLoadedCount = 0;
        // we traverse now the conversations ref with the past conversations.
        userSnapshot.child('conversations').forEach(function (conversationKey) {
            var conversationRef = database.ref('conversations').child(conversationKey.key);
            conversationRef.on('value', function (conversationsSnapshot) {
                var conversation = conversationsSnapshot.val();

                conversationLoadedCount = conversationLoadedCount + 1;
                myObject[conversationKey.key] = conversation;
                // console.log(conversationKey.key);
                this.state.conversations[conversationKey.key] = conversation;
                this.setState({ conversations: this.state.conversations });
                if (conversationLoadedCount === conversationCount) {
                    console.log("We've loaded all conversations");
                }
            }.bind(this)); // one for the usersRef
        }.bind(this)); // another one for the forEach inside 
    }.bind(this)); // the final one for the conversationRef.on...