React Native中如何从Firebase的JSON树获取指定子节点值？

我的问题 #

我正在使用React Native和Firebase开发项目，Firebase中的JSON数据结构如下：

{"Message" {"-LCi0UViBvOn4eh9cqzW": {"contents":"hello", "timestamp":1526559275118} } }

初始化Firebase的代码是：

const firebaseApp = firebase.initializeApp(firebaseConfig); 
let db = firebaseApp.database(); 
let ref = db.ref("/message");

我在componentDidMount里尝试读取消息内容并打印到控制台：

componentDidMount() { 
  ref.on("value", function(snapshot) { 
    var messageText = JSON.stringify(snapshot.val()); 
    console.log(messageText); 
    var parsedMessage = JSON.parse(messageText); 
    console.log(parsedMessage.contents); 
  }); 
}

第一个console.log能正常输出：

{"-LCi0UViBvOn4eh9cqzW":{"contents":"hello","timestamp":1526559275118}}

但第二个尝试获取contents的console.log始终输出undefined，请问哪里操作错了？

问题分析与解决办法 #

嗨，问题很明显啦——你解析后的对象结构和你想的不一样！

看第一个console.log的输出，parsedMessage的第一层键是Firebase自动生成的节点ID -LCi0UViBvOn4eh9cqzW，contents是这个子对象里的属性。你直接写parsedMessage.contents，相当于在最外层找这个属性，当然找不到，所以返回undefined。

另外多说一句：snapshot.val()本身就是一个JavaScript对象，完全没必要先转成JSON字符串再解析，这两步纯粹是多此一举，直接用就行。

给你两种可行的解决方式：

方式一：遍历子节点（推荐，支持多消息场景） #

如果以后你的message节点下会有多个消息，用Firebase快照的forEach方法遍历每个子节点是最稳妥的：

componentDidMount() { 
  ref.on("value", function(snapshot) { 
    // 遍历每个子节点
    snapshot.forEach(childSnapshot => {
      const message = childSnapshot.val();
      console.log(message.contents); // 这里就能输出"hello"了
    });
  }); 
}

方式二：直接访问已知节点ID（仅适用于单个固定节点） #

如果你确定当前只有这一个消息节点，而且知道它的ID，也可以直接通过键名访问：

componentDidMount() { 
  ref.on("value", function(snapshot) { 
    const messageData = snapshot.val();
    // 用节点ID作为键访问子对象，再取contents
    console.log(messageData["-LCi0UViBvOn4eh9cqzW"].contents); 
  }); 
}

最后提个小细节：你初始化里的路径是/message（小写m），但Firebase里的节点是Message（大写M），不过看你能正常输出数据，应该是实际代码里路径是对的，可能是提问时的笔误，没问题就忽略这个~

内容的提问来源于stack exchange，提问作者stor314