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

我目前初始化我的状态是这样的：使用React + Firebase，如何修改嵌套查询中的状态？

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警告：异常是由用户回调抛出的。类型错误：无法读取null``的特性“的setState”

略有相似： Uncaught TypeError: Cannot read property 'setState' of null

我基于与没有成功任何这个优秀的答案我的代码： Firebase two-way relationships/Retrieving data

这里面运行componentDidMount function。

关于如何影响国家的任何建议？

来源

2017-02-27 villancikos

我找到了解决我的问题的方法，在每次firebase调用后添加“.bind（this）”就可以了，我不想将它标记为答案，因为我可以使用一些关于性能的建议:) – villancikos

在ES6如果你使用的脂肪箭头的功能，这将是更清洁，“这将”的约束，例如：

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

来源

2017-02-27 14:45:59

This是我正在寻找的那种洞察力。我在哪里可以阅读更多关于此？为什么这个“胖箭头”函数自动绑定？ – villancikos

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions –

我发现我的问题的解决方案只是试图绑定它。解决方法是每当我拨打firebase.database().ref()时拨打bind(this)。这里是最后的片段，希望它有助于像我这样的可怜的灵魂，如果有人有一个更好的答案或一些解释如何改善这一点，请让我知道：

var myObject = {}; usersRef.on（“值”，函数（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...

来源

2017-02-27 14:43:54 villancikos

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

回答

相关问题