Estoy tratando de crear una aplicación web utilizando la API de base de datos de especificaciones de motocicletas de rapidAPI.

Quiero exportar datos obtenidos de index.js a App.js para poder usar los datos en la aplicación. Pero, cuando intento consolar. registrar los datos obtenidos en la función componentDidMount en App.js, no está definido. No sé por qué en este momento, ¿puedes ver por qué?

/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); }); }

Aplicación.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;