如何在 react/firebase 中正确使用 child_add答案

【问题标题】：How to use child_added correctly in react/firebase如何在 react/firebase 中正确使用 child_add
【发布时间】：2016-11-09 11:08:21
【问题描述】：

我不完全确定这是正确的方法，但我正在尝试将用户可能收到的不同消息附加到我的 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 是我输入的内容，例如'你好' 聊天是一个具有 3 个属性的对象 msg 是一个 id。

所以我每次发送它时都会尝试将一个子元素附加到这个 html 元素。

我希望我的 firebase 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"
        }

【问题讨论】：

标签： javascript reactjs firebase

【解决方案1】：

您需要将 messageBodyValue 包装在 DOM 节点中，然后再将其传递给 appendChild。

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

这应该不会影响您的 Firebase 实例中的数据结构，但您尝试存储数据的方式似乎存在问题。

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

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

相反，您必须获取messageBody ref，然后将push 更多值放到它上面。

【讨论】：