0
226
VistasLa llamada API React devuelve una respuesta vacía y luego devuelve los datos
Cuando sigo esta documentación https://reactjs.org/docs/faq-ajax.html ejecuto el código y si i console.log() la variable de elementos en la declaración de devolución. Recibo lo siguiente que causa problemas porque la primera respuesta está vacía: 
El código que utilicé es el siguiente:
import React, {useState, useEffect} from 'react'; import logo from './logo.svg'; import './App.css'; function App() { const [error, setError] = useState(null); const [isLoaded, setIsLoaded] = useState(false); const [items, setItems] = useState([]); useEffect(() => { fetch("http://www.7timer.info/bin/api.pl?lon=113.17&lat=23.09&product=astro&output=json") .then(res => res.json()) .then( (result) => { setIsLoaded(true); setItems(result); }, // Note: it's important to handle errors here // instead of a catch() block so that we don't swallow // exceptions from actual bugs in components. (error) => { setIsLoaded(true); setError(error); } ) }, []) if (error) { return <div>Error: {error.message}</div>; } else if (!isLoaded) { return <div>Loading...</div>; } else { return ( <ul> {console.log(items)} </ul> ); } } export default App;Cualquier ayuda sería genial.
2 Respuestas
Responde la pregunta0
No es un problema de 'la primera respuesta está vacía'. Primero, console.log se ejecuta antes de que se ejecute el código asíncrono, cuando se ejecuta el código asíncrono y usted cambia su estado, el componente vuelve a representar y vuelve a ejecutar el archivo console.log con elementos recién actualizados que ahora están llenos de datos obtenidos de API.
Quizás debería leer un poco más sobre los ciclos de vida de los componentes de reacción :)
0
Puede usar un condicional para ejecutar su código solo si el resultado no está vacío para evitar fallas.
if (result) { //your code }