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

Question

I'm trying to read data from a realtim database in firebase but I can not get this information to be rendered in a Text component. I can only show the information of the object by console.log and decompose it but in the render of the screen the information is not shown.

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>
  )
 }
}

Object obtained from the database displayed by console: ,

Android Emulator:

What I can be doing wrong ?

Answer 1

You need to change the state property once the value has been retrieved:

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

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

Documentation