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

Question

我尝试显示已存储在 Firebase 实时数据库中的 WeightGoal，但出现以下错误。 “对象作为 React 子对象无效(发现:带有键 {…} 的对象)”

这是我的 json 文件:

这是我的 componentWillMount 代码:

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

这是我如何引用渲染内部的值:

{this.state.WeightGoal}

我的期望是看到屏幕上显示 170。

任何帮助将不胜感激。

Answer 1

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

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

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

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

附注下次尝试将 console.log(this.state) 添加到 render() 中以查看显示的内容。或者在Chrome Debugger中添加断点，这是更可靠的方法。