Estoy tratando de crear un componente de carga para que mi aplicación no intente mostrar mis datos de API antes de que se cargue, lo que provoca un error fatal. Lea mucho sobre la función componentWillMount pero esto parece haber quedado obsoleto. Intentar usar setState sin éxito.
import { useEffect, useState } from "react"; import Marquee from "react-fast-marquee"; const News = () => { const [data, setData] = useState({}); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); const getNewsFromApi = async () => { const response = await fetch( "API_KEY_HERE" ); const responseJson = await response.json(); console.log("json", responseJson); setData(responseJson); }; setLoading(false); setInterval(getNewsFromApi, 1000) }, []); if (loading) { return <h1> Data is loading...</h1> } return ( <div > <Marquee gradientColor="" speed="120"> <h1>{data?.articles[0].title} - </h1> <h1>{data?.articles[1].title} - </h1> <h1>{data?.articles[2].title} - </h1> <h1>{data?.articles[3].title} - </h1> <h1>{data?.articles[4].title} - </h1> <h1>{data?.articles[5].title} - </h1> <h1>{data?.articles[6].title} - </h1> <h1>{data?.articles[7].title} - </h1> <h1>{data?.articles[8].title} - </h1> </Marquee> </div> ) } export default NewsuseEffect hook se ejecuta después del render (ver docs ). Entonces que va a pasar:
loading como false (llamando a useState(false) ).loading=false , por lo que omite la carga del marcador de posición e intenta representar inmediatamente la lista de artículos, que es {} . ¿Significa data?.articles no están undefined .Yo haría los siguientes cambios:
const [loading, setLoading] = useState(true);Esto hará que el componente represente el marcador de posición de carga por primera vez. 2. Usar el estado como una matriz de artículos en lugar de un objeto que se devuelve desde su API también tiene sentido (como sugirió @Bru No). Pero deberá realizar cambios en su efecto, algo como:
setData(responseJson.articles);comienza a leer información del estado antes de la respuesta de la API, sugiero usar esta solución
import { useEffect, useState } from "react"; import Marquee from "react-fast-marquee"; const News = () => { const [data, setData] = useState([]); const [loading, setLoading] = useState(false); useEffect(() => { setLoading(true); (async function getNewsFromApi(){ const response = await fetch( "API_KEY_HERE" ); const responseJson = await response.json(); console.log("json", responseJson); setData(responseJson); })(); setLoading(false); }, []); if (loading) { return <h1> Data is loading...</h1> } return ( <div > <Marquee gradientColor="" speed="120"> {data.length > 0 && data.articles.map((item)=> <h1>{item.title} </h1>)} </Marquee> </div> ) } export default News