Good afternoon!
I made a function that searches the data of a JSON on the Web, but wanted to wrap it in a function that would take longer than for example 10 seconds to explode an error on the screen, currently the page is only blank, it only explodes the error if I change the url of the get
componentDidMount(){
this.setState({loading:true})
setTimeout(()=>{
axios
.get('LINK DO JSON')
.then(response =>{
const {dados} = response.data;
//colocando no state
this.setState({
pessoas: dados,
loading: false,
})
}).catch(error => {
this.setState({
loading: false,
error: true,
})
})
},8000)
}
If it takes more than 10 seconds, I wanted it to be an error, but it only gives the error if I move there in the JSON link and put a nonexistent one. The setTimeOut is loading loading for those "8 seconds - 8000 miliseconds", but then goes blank and wanted to explode an error instead
Code that calls after:
render() {
return (
<View style = {styles.container}>
{
this.state.loading
? <ActivityIndicator size='large' color='#97c19a'/>
: this.state.error
? <View>
<Text style={styles.error}>Ops... Algo deu errado =(</Text>
<Text style={styles.error2}>Tente recarregar a página!</Text>
<Text style={styles.error2}>Se o problema persistir, contate a TI!</Text>
</View>
: <ListaDePessoas pessoas={this.state.pessoas} onPressItem={pageParams => {this.props.navigation.navigate('PeopleDetailPage', pageParams)}}/>
}
</View>
);
}}