1

¿Cómo Leer datos desde una RealTimeDatabase en ?

Hola, estoy intentando leer datos desde una base de datos realtime en pero no logro hacer que se renderice esta información en un Text component. solo puedo mostrar la informacion del objeto por console.log y descomponerlo pero en el render de la pantalla no se muestra la información.

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

Objeto obtenido de la base de datos mostrado por consola

Objeto obtenido de la base de datos mostrado por consola


Emulador android

emulador android

¿Qué puedo estar haciendo mal?

1 respuesta 1

1

Respuesta corta

Hay que usar setState en vez de mutar el estado directamente.

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

Respuesta larga

Un concepto clave en React (y por consiguiente, en React Native también) es el de inmutabilidad.

En particular, el estado interno de los componentes de React (el state) debe ser inmutable, es decir, no debe ser mutado/modificado directamente sino reemplazado cada vez que queremos hacer un cambio. Para esto, React nos provee el método setState (documentado aquí) que se encarga de actualizar el mismo y que genera como consecuencia un nuevo render que hace que los cambios se vean reflejados en la UI.

1
  • Ahora entindo mejor las cosas que bueno ver tu respuesta por estos lados :D Commented el 15 ago. 2018 a las 20:18

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.