使用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，如何修改嵌套查詢中的狀態？

回答

相關問題