I am trying to learn React by making a motor cycle spec search web application.

I am making two axios requests in /api/index.js, and I am getting an error saying

'429 (Too Many Requests)'.

What am I doing wrong here?

/api/index.js

import axios from "axios";

const options1 = {
  method: 'GET',
  url: '',
  headers: {
    'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi',
    'X-RapidAPI-Key': 'MyAPIKey'
  }
};
const options2 = {
    method: 'GET',
    url: '',
    headers: {
      'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi',
      'X-RapidAPI-Key': 'MyAPIKey'
    }
  };
 
  export const makeList = async()=>{
    try{
        const {data} = await axios.request(options2);
        console.log('list of all makes is like this now', data);
        return data;
    }
    catch(error){

    }

  }
 
export const fetchData = async ()=>{
 try{
     const {data} = await axios.request(options1);
     return data;

 } 
 catch(error){

 }

}

and this is where I'm trying to use the data. App.js

import logo from './logo.svg';
import './App.css';
import {fetchData, makeList} from './api/index';
import React, {Component} from 'react';

class App extends React.Component{
  state = {

    data:[],
    makes:[],
  }

  async ponentDidMount(){
    const fetchedData = await fetchData();
    const fetchedMakeList = await makeList();
    this.setState({data:fetchedData, makes:fetchedMakeList});
    //this.setState({makes:fetchedMakeList});
    console.log('list of all makes in ponentDIDMOUNT is like ', fetchedMakeList);  
    //why is this undefined??
  }


render(){
 
  return (
    <div className="App">
      <header className="App-header">
      <h1>Some line-ups from YAMAHA</h1>
      {partOfTheArray.map(data=>{
       return <p>{data.name}</p> 
      })}
        <a
          className="App-link"
          href=";
          target="_blank"
          rel="noopener noreferrer"
        >
          Open React
        </a>
      </header>
    </div>
  );
}

}
  
export default App;

I am only requesting 2 requests, but I am getting this error message.

I am trying to learn React by making a motor cycle spec search web application.

I am making two axios requests in /api/index.js, and I am getting an error saying

'429 (Too Many Requests)'.

What am I doing wrong here?

/api/index.js

import axios from "axios";

const options1 = {
  method: 'GET',
  url: 'https://motorcycle-specs-database.p.rapidapi./model/make-name/Yamaha',
  headers: {
    'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi.',
    'X-RapidAPI-Key': 'MyAPIKey'
  }
};
const options2 = {
    method: 'GET',
    url: 'https://motorcycle-specs-database.p.rapidapi./make',
    headers: {
      'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi.',
      'X-RapidAPI-Key': 'MyAPIKey'
    }
  };
 
  export const makeList = async()=>{
    try{
        const {data} = await axios.request(options2);
        console.log('list of all makes is like this now', data);
        return data;
    }
    catch(error){

    }

  }
 
export const fetchData = async ()=>{
 try{
     const {data} = await axios.request(options1);
     return data;

 } 
 catch(error){

 }

}

and this is where I'm trying to use the data. App.js

import logo from './logo.svg';
import './App.css';
import {fetchData, makeList} from './api/index';
import React, {Component} from 'react';

class App extends React.Component{
  state = {

    data:[],
    makes:[],
  }

  async ponentDidMount(){
    const fetchedData = await fetchData();
    const fetchedMakeList = await makeList();
    this.setState({data:fetchedData, makes:fetchedMakeList});
    //this.setState({makes:fetchedMakeList});
    console.log('list of all makes in ponentDIDMOUNT is like ', fetchedMakeList);  
    //why is this undefined??
  }


render(){
 
  return (
    <div className="App">
      <header className="App-header">
      <h1>Some line-ups from YAMAHA</h1>
      {partOfTheArray.map(data=>{
       return <p>{data.name}</p> 
      })}
        <a
          className="App-link"
          href="https://reactjs"
          target="_blank"
          rel="noopener noreferrer"
        >
          Open React
        </a>
      </header>
    </div>
  );
}

}
  
export default App;

I am only requesting 2 requests, but I am getting this error message.

• javascript
• reactjs
• axios

Share Improve this question Follow edited May 5, 2022 at 4:52 Hayato asked May 5, 2022 at 3:02 HayatoHayato 6111 gold badge11 silver badge99 bronze badges 5

• 1 there may be rate limit and the two requests are too quick. A quota limit per day that you hit? – Bravo Commented May 5, 2022 at 3:05
• 3 I think api/index.js is fine. But the ponent in which you are using the fetchData() function is rendered too many times because of state changes. Can you add the code for that specific ponent where it is being used. – Amit Commented May 5, 2022 at 3:09
• 1 Yes you may have used useState hook and changing the data in that means an endless loop of requests! – Ashish sah Commented May 5, 2022 at 3:10
• 1 By the way - I assumed only two requests are ACTUALLY made as that is what is stated in the question - check the browser developer tools to see how many ACTUAL requests are being made to confirm – Bravo Commented May 5, 2022 at 3:10
• 2 please add the code where you are using this data value and this fetchData function – Ashish sah Commented May 5, 2022 at 3:11

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

Assuming that you're trying to fetch data when ponent mounts, here is a better approach to do so:

// Import useState and useEffect
import React, {useState, useEffect} from 'react';

export default function SomeComponent() {
  let [data, setData] = useState(null)

  // use an useEffect with empty dependecy(empty [] as a dependecy) to fetch the data
  // empty [] makes sure that you're fetching data only once when the ponent mounts
  useEffect(() => {
    fetchData().then(res => {
        // check status for response and set data accordingly
        setData(res.data)
        // log the data
        console.log(res.data)
    })
  },[])

  return (
    <div className="App">
    </div>
  );
}

You need to update your fetchData() function as well.

export const fetchData = async ()=>{
 try{
     const response = await axios.request(options1);
     // return the whole response object instead of only the data.
     // this helps in error handling in the ponent
     return response;
 }
 catch(error){}
}

I hope it helps!