在React Native应用上检索Firebase数据时出现问题

Question

我试图显示已经存储在Firebase RealTime数据库中的WeightGoal，但是出现以下错误。 “对象作为React子对象无效（找到：带有键{…}的对象）”

这是我的json文件：

这是我的componentWillMount代码：

componentWillMount() {
  const { currentUser } = firebase.auth();
  firebase
    .database()
    .ref(`/users/${currentUser.uid}/goals`)
    .on('value', snap => {
      this.setState({ WeightGoal: snap.val()})
    })
}

这是我如何引用render内部的值：

{this.state.WeightGoal}

我期望在屏幕上看到170。

任何帮助将不胜感激。

Answer 1

snap.val()是由数据库中的goal对象组成的对象，因为这就是您要引用的对象：

.ref(`/users/${currentUser.uid}/goals`)

因此，如果您只想存储WeightGoal property，则使用this.setState的行应如下所示：

this.setState({ WeightGoal: snap.val().WeightGoal })

P.S。下次尝试将console.log（this.state）添加到render（）中，以查看正在显示的内容。或在Chrome调试器中添加断点，这是一种更可靠的方法。