I am trying to make a web application using Motorcycle Specs Database API from rapidAPI.
I want to export fetched data from index.js to App.js so that I can use the data in the app. But, when I try to console.log the fetched data in componentDidMount function in App.js, it is undefined. I don't know why at the moment, can you see why??
/api/index.js
import axios from "axios";
const options = {
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'
}
};
export const fetchData = async ()=>{
await axios.request(options).then(function (response) {
console.log(response.data);
return response.data;
}).catch(function (error) {
console.error(error);
});
}
App.js
import logo from './logo.svg';
import './App.css';
import {fetchData} from './api/index';
import React, {Component} from 'react';
class App extends React.Component{
state = {
data:[],
}
async componentDidMount(){
const fetchedData = await fetchData();
console.log('fetchedData is like this',fetchedData);
this.setState({data:fetchedData});
}
render(){
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
}
export default App;
Use try/catch instead of chaining then and catch to your promise:
export const fetchData = async () => {
try{
const { data } = await axios.request(...);
return data;
} catch (errors) {
console.log(errors);
}
}