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

CodePudding user response：

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.