Revisé diferentes tutoriales sobre cómo mostrar una serie de tiempo simple en React. La mayoría de ellos no usan gancho, así que traté de adaptar el código. Me quedé atascado cuando intenté recuperar datos con Axios desde una API abierta. El error que obtuve es ERROR in ./src/App.js Module build failed (from ./node_modules/babel-loader/lib/index.js) y ERROR in src/App.js Line 27: Parsing error: Unexpected token, expected "," (27:0)
Me encontré con estos errores incluso antes de intentar mostrar algo. Parece que algo está relacionado con axios.get o hay algún problema con mi gancho useEffect. ¿Podrías ayudarme con esto por favor? Muchas gracias
import React , { useState, useEffect} from 'react'; import logo from './logo.svg'; import axios from 'axios'; import './App.css'; const App =()=> { useEffect(() => { let x = []; let y = []; axios.get('https://data.cityofnewyork.us/resource/rc75-m7u3.json').then(response=>{ console.log('response',response) response.map(each => { x.push(each.date_of_interest) y.push(each.case_count) .catch((error) => {console.log(error)}) }, []) return ( <div>Hello </div> )} export default App;bucle en respuesta.datos:
import React, { useEffect } from "react"; import axios from "axios"; export default function App() { useEffect(() => { let x = []; let y = []; axios .get("https://data.cityofnewyork.us/resource/rc75-m7u3.json") .then((response) => { response.data.forEach((each) => { x.push(each.date_of_interest); y.push(each.case_count); }); }) .catch((err) => console.log(err)); }, []); return <div>Hello </div>; }Tienes varios problemas aquí:
}); después de empujar sus datos import React , { useState, useEffect} from 'react'; import logo from './logo.svg'; import axios from 'axios'; import './App.css'; const App =()=> { const [xCoords, setXCoord] = useState([]); const [yCoords, setYCoord] = useState([]); useEffect(() => { axios.get('https://data.cityofnewyork.us/resource/rc75-m7u3.json') .then(response=> response.json()) .then(data => { setXCoords(data.date_of_interest); setYCoords(data.case_count); }).catch((error) => {console.log(error)}) }, []) return ( <div>Hello </div> <pre> { xCoords.map(x => <span>{x}</span>) } </pre> )} export default App;