Tengo una declaración if en mi código, que verifica si displayName es nulo. Si es así, vuelve a intentarlo, ya que el usuario tiene que esperar a que una función de Firebase cree los datos del usuario, que luego el usuario cambia. El render tiene que devolver una pantalla de carga mientras que displayName cambia de nulo. Mi único problema es que cuando verifico si el displayName es nulo, aparece el error:
null no es un objeto (evaluando this.props.currentUser.displayName
Aquí está mi código:
class MainPage extends Component { constructor(props) { super(props) this.state = { userDataFetched: false } this.checkUser = this.checkUser.bind(this) } componentDidMount() { this.checkUser() } checkUser() { if (this.props.currentUser.displayName !== null) { this.userDataFetched = true window.clearTimeout(this.checkUser) console.log("Ran checkUser(), displayName=", this.props.currentUser.displayName, ", userDataFetched=", this.userDataFetched) } else { window.clearTimeout(this.checkUser) window.setTimeout(this.checkUser, 500) console.log("Retrying checkUser(), displayName=", this.props.currentUser.displayName) } } render() { if (this.userDataFetched) { return } else { return ( <View> <Text>Loading...</Text> </View> ) } } }¿Hay alguna manera de verificar el displayName sin obtener el error?
Estás tratando de leer una propiedad de null aquí:
if (this.props.currentUser.displayName !== null) { Probablemente esté pasando null cuando un usuario no ha iniciado sesión, por lo que tendrá que manejar este caso en su declaración if.
if (this.props.currentUser && this.props.currentUser.displayName !== null) { // Your logic } Arriba se asegurará de que currentUser no sea null , por lo que puede verificar con seguridad si la propiedad displayName está configurada o no.