Estoy tratando de aprender React creando una aplicación web de búsqueda de especificaciones de motocicletas.
Estoy haciendo dos solicitudes axios en /api/index.js y recibo un error que dice
'429 (demasiadas solicitudes)'.
¿Qué estoy haciendo mal aquí?
/api/index.js
import axios from "axios"; const options1 = { method: 'GET', url: 'https://motorcycle-specs-database.p.rapidapi.com/model/make-name/Yamaha', headers: { 'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi.com', 'X-RapidAPI-Key': 'MyAPIKey' } }; const options2 = { method: 'GET', url: 'https://motorcycle-specs-database.p.rapidapi.com/make', headers: { 'X-RapidAPI-Host': 'motorcycle-specs-database.p.rapidapi.com', '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){ } }y aquí es donde estoy tratando de usar los datos. Aplicación.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 componentDidMount(){ 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 componentDIDMOUNT 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.org" target="_blank" rel="noopener noreferrer" > Open React </a> </header> </div> ); } } export default App;Solo estoy solicitando 2 solicitudes, pero recibo este mensaje de error.
Suponiendo que está tratando de obtener datos cuando se monta el componente, aquí hay un mejor enfoque para hacerlo:
// 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 component 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> ); } También debe actualizar su función fetchData() .
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 component return response; } catch(error){} }¡Espero que ayude!