React Native Possible Unhandled Promise Error with axios - react-native

Question

I am trying to fetch two different api with axios and use it on different flatlist
I'm getting this error:
[Unhandled promise rejection: Error: Request failed with status code 429]
Possible Unhandled Promise Rejection (id: 28)
Here's the my code
const [data, setData] = React.useState([]);
const [data1, setData1] = React.useState([]);
axios.all([
axios.get('https://jsonplaceholder.typicode.com/nation'),
axios.get('https://jsonplaceholder.typicode.com/state')
])
.then(responseArr => {
setData(responseArr[0].data);
setData1(responseArr[1].data);
});
return (
<View style={styles.container}>
<View >
<FlatList
data={data}
listKey="nation"
keyExtractor={item => item.id}
showsVerticalScrollIndicator = {false}
renderItem={({item}) => {
return (
<View>
<Text>{item.event_id}</Text>
</View>
)
}}
/>
</View>
<View style={{ marginTop: 30 }}>
<FlatList
data={data1}
listKey="state"
keyExtractor={item => item.id}
showsVerticalScrollIndicator = {false}
renderItem={({item}) => {
return (
<View>
<Text>{item.venue_id}</Text>
</View>
)
}}
/>
</View>
</View>
);
};
Thank for your help

Answer 1

You are receiving a HTTP 429 error code which means:
The HTTP 429 Too Many Requests response status code indicates the user has sent too many requests in a given amount of time ("rate limiting").
You are calling the API too many times, what's happening is:
axios is called.
setData() is executed and your state variable updates.
The rerender is causing axios to run again.
Congratulations, you're now in a loop!
Refactor your code to only run the API call at appropriate times. Something like this:
useEffect(() => {
axios.all([
axios.get('https://jsonplaceholder.typicode.com/nation'),
axios.get('https://jsonplaceholder.typicode.com/state')
])
.then(responseArr => {
setData(responseArr[0].data);
setData1(responseArr[1].data);
});
}, []); // Ensure any dependencies are added here.
For good measure you should also handle the rejection, which is what the original error is mentioning.
axios.all().then().catch() - You're missing a catch statement.
For the question in the comments, you need to use back ticks when interpolating strings.
<Image
source={{
uri: `https://jsonplaceholder.typicode.com/nation/image/${item.nation_image}`
}}
/>