Существует несколько способов отображения сообщения об ошибке, когда что-то происходит в случае сбоя API.
Проверьте приведенный ниже пример и измените его в соответствии с вашими требованиями.
import React from "react";
import { FlatList, ActivityIndicator, Text, View } from "react-native";
import axios from "axios";
export default class Example extends React.Component {
state = {
isLoading: true,
isError: false
};
componentDidMount() {
return axios
.get("https://reactnative.dev/movies.json")
.then(response => {
this.setState({
isLoading: false,
data: response.data.movies
});
})
.catch(error => {
this.setState({
isLoading: false,
isError: true
});
});
}
render() {
return (
<View style={{ flex: 1, paddingTop: 20 }}>
{
// Shows loding indicator until data loads
this.state.isLoading ?
<View style={{ flex: 1, padding: 20 }}>
<ActivityIndicator />
</View>
:
// Shows an error if an error occured
this.state.isError ?
<View style={{ flex: 1, padding: 20, alignItems: 'center' }}>
<Text>Oops ? error while loading</Text>
</View>
:
// Display data after successful fetch
<FlatList
data={this.state.data}
renderItem={({ item }) => (
<Text>
{item.title}, {item.releaseYear}
</Text>
)}
keyExtractor={({ id }, index) => id}
/>
}
</View>
);
}
}
Надеюсь, это поможет вам. Не стесняйтесь сомнений.