如何在React Native中从Firebase中的数据库访问信息并在<text>中显示它？

Question

我正在尝试从firebase中的realtim数据库中读取数据，但是无法在 Text 组件中呈现此信息。我只能通过 console.log 显示对象的信息并将其分解，但在屏幕渲染中不会显示该信息。

class UserProfileScreen extends Component<Props> {

state = {
 dataUser : []
}

componentDidMount(){
const { uid } = firebaseAuth.currentUser
this.getUserRef().child(uid).once('value',function(snapshot){
 dataUser = snapshot.val()
  console.log(dataUser.username)
 })
}

getUserRef = () => {
  return firebaseDatabase.ref('users')
}

render(){
 const {dataUser} = this.state
 return(
  <View style={styles.container}>
    <Text>{dataUser.username}</Text>
  </View>
  )
 }
}

从控制台显示的数据库中获取的对象： ，

Android模拟器：

我做错了什么？

Answer 1

获取值后，您需要更改state属性：

constructor() {
  this.state = { dataUser: {} };
}

componentDidMount(){
  ...
  this.getUserRef().child(uid).once('value',function(snapshot){
    dataUser = snapshot.val()
    this.setState({
      dataUser: dataUser // es5
      dataUser // es6 
    });
  });
  ...
}

Documentation