0

!Hola amigos¡ Recientemente estoy intendando realizar aplicaciones utilizando react native (yo vengo de VueJs), hasta ahorita no he tenido mayor problema hasta ahorita que estoy intentando implementar un rerendizado condicional para que el elemento no se muestre si no existe.

Tengo esto:

getreportbycode = async() => {
        this.setState({show : false})
        if(this.state.finder !== ''){
            const token = await AsyncStorage.getItem('petra-token');
            this.setState({ jwt: token, sendform: true });
            axios.post('https://petrapi.herokuapp.com/emergence/find', {
                report_id : this.state.finder
        }, {headers: {
                Authorization: `Bearer ${this.state.jwt}`
        }
            }).then(response => {
                this.setState({report: response.data.data, sendform:false})
                console.log(this.state.report)
                this.setState({mostrar : true})

        }).catch(error => {
            this.setState({finder:'', sendform:false})
            console.log(error)
        })
        }
    }

Y esto (Resumiendolo) :

report(report){
        if(this.state.show == true){
            return(
                <Card>
                    <CardItem>
                            <Left>
                            { report.alert.image == null
                            ?
                            <Thumbnail source={{uri:
                            'https://cdn2.iconfinder.com/data/icons/user-icon-2-1/100/user_5-15-512.png' }}
                            
                                style={{height: 50, width: 50}}/>
                            :
                            <Thumbnail source={{uri: report.alert.image}}
                            style={{height: 50, width: 50}}/>
                            }
                        </Left>
                        <Body>
                            <Text>
                                Creador: {report.user.name}
                            </Text>
                            {this.proccesbar(report.status)}
                        </Body>
                    </CardItem>
                    </Card>
)} else {
    return(
    <Text>Hello world</Text>
    )
}

Lo que estoy intentando implementar es que cuando el usuario ejecute una busqueda le muestre un elemento y si este elemento no existe muestre otra cosa, no obstante la promesa sí se resuelve bien pero cuando intento capturar errores me aparece lo siguiente :

imagen

Supongo que es por que el objeto al que estoy llamando está vacio pero ¿Existe alguna manera correcta de hacer esto para que ese pedazo de vista no se ejecute si no se cumple una condición ?

1 respuesta 1

2

podrías cambiar la condición para que primero verifique que venga el valor alert dentro de report

{ !report.alert || report.alert.image == null
    ?
        <Thumbnail source={{uri: 'https://cdn2.iconfinder.com/data/icons/user-icon-2-1/100/user_5-15-512.png' }} style={{height: 50, width: 50}} />
    :
        <Thumbnail source={{uri: report.alert.image}}} style={{height: 50, width: 50}}/>
}

Tu Respuesta

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

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