如何在react/firebase中正确使用child_added

Question

我不完全确定这是正确的方式，但我试图追加到我的firebase数据库中，用户可能会收到不同的消息。

我有这样的功能，当我点击一个按钮，叫做：

sendMessageButtonClicked: function(){ 
     var loggedInUser = this.state.loggedInUserObject; 
     var databaseRef = firebase.database().ref().child('users/' + loggedInUser.useruid + '/messages/'); 
     databaseRef.on('child_added', function(snapshot){ 
     var messageBodyValue = document.getElementById('message').value; 
     var chat = snapshot.val(); 
     var msg = document.getElementById('msgs'); 
     msg.appendChild(messageBodyValue); 
     }) 
    }, 

但我得到的错误：

failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node' 

我可以证实messageBodyValue是什么都我如键入'hello' 聊天是一个包含3个属性的对象 msg是一个id。

所以我试图在每次发送它时向此html元素添加一个子元素。

我希望我的火力JSON从去：

"messages" : { 
     "PHS2DwlCZ0RJaylhJ0FNgEiNLug2" : { 
      "messageBody" : "Hello, how are you?", 
      "receiverName" : "Lucy", 
      "receiverUseruid" : "PHS2DwlCZ0RJaylhJ0FNgEiNLug2" 
     } 

到：

"messages" : { 
     "PHS2DwlCZ0RJaylhJ0FNgEiNLug2" : { 
      "messageBody" : "Hello, how are you?", 
      "messageBody" : "another msg", 
      "messageBody" : "another child message", 
      "receiverName" : "Lucy", 
      "receiverUseruid" : "PHS2DwlCZ0RJaylhJ0FNgEiNLug2" 
     } 

Answer 1

你需要传递到appendChild之前包裹messageBodyValue DOM节点内。

var messageBodyValue = document.getElementById('message').value; 
var messageElement = document.createTextNode(messageBodyValue); 
var msg = document.getElementById('msgs'); 
msg.appendChild(messageElement); 

这不应该影响数据在你的火力地堡实例的结构，但它看起来像有可能与你想存储数据的方式有问题。

"PHS2DwlCZ0RJaylhJ0FNgEiNLug2" : { 
    "messageBody" : "Hello, how are you?", 
    "messageBody" : "another msg", 
    "messageBody" : "another child message", 
    "receiverName" : "Lucy", 
    "receiverUseruid" : "PHS2DwlCZ0RJaylhJ0FNgEiNLug2" 
} 

一个对象不能有多个messageBody属性。

相反，你必须得到messageBody ref，然后push其他值。