在React-native和AXIOS上进行条件渲染的问题

时间:2019-12-28 23:17:52

标签: javascript reactjs react-native expo

我在本机反应方面有一个大问题,我有这个问题:

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

这:

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

问题仅在我尝试捕获“错误”时出现此错误消息:

only when i tried catch error

有什么办法可以正确地做到这一点?

1 个答案:

答案 0 :(得分:0)

似乎您正在尝试获取未定义对象的图像值。 因此,您不仅可以检查report.alert.image是否为null,还可以验证reportalert对象是否具有值,例如:

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