import React, { useEffect, useState } from 'react'; import { Spinner } from 'react-bootstrap'; import Country from '../Country/Country' const Countries = () => { const[countries,setCountries]=useState([]) const [isLoading,setLoading]=useState(true) useEffect(()=>{ fetch('https://restcountries.com/v3.1/all') .then(res=>res.json()) .then(data=>setCountries(data)) setLoading(false) },[]) return ( <div className='container'> <div className="row row-cols-lg-4 row-cols-md-2 row-cols-sm-1 row-cols-1 g-2 mt-3"> { isLoading?<Spinner animation='border'/>:countries.map(country=><Country key={Math.random(1,10)} country={country} />) } </div> </div> ); }; export default Countries;Spinner funciona fuera de { }. Pero cuando intento esto->
{isLoading?<Spinner animation='border'/>:countries.map(country=><Country key={Math.random(1,10)} country={country} />)}.No está funcionando. Quiero decir que no mostró ninguna rueda giratoria antes de mostrar los datos.
Intente deshabilitar el control giratorio después de que llegue la respuesta:
useEffect(()=>{ fetch('https://restcountries.com/v3.1/all') .then(res=>res.json()) .then(data=>{ setCountries(data) setLoading(false) })Le sugiero que use solo el estado de los países:
const[countries,setCountries]=useState(null) .... !countries?<Spinner animation='border'/>:countries.map(.... },[])Debería estar registrando lo que isLoading es justo antes de la devolución. También debe poner el cambio de estado en el final then para confirmar que hay datos y ha terminado de recuperarse.
useEffect(()=>{ fetch('https://restcountries.com/v3.1/all') .then(res=>{ if (!res.ok){ console.log(res) } else { res.json() } }).then(data=>{ setCountries(data) setLoading(false) // here is the state change }) })Primero, haga que setLoading sea falso cada vez que obtenga datos:
useEffect(() => { fetch("https://restcountries.com/v3.1/all") .then((res) => res.json()) .then((data) => { setCountries(data); setLoading(false); }); }, []);Use una función para representar países para una buena práctica:
const renderCountries = () => { countries.map((country) => ( <Country key={Math.random(1, 10)} country={country} /> )); };Finalmente, marque isLoading y luego muestre el control de giro y luego invoque la función para mostrar los países:
{isLoading ? <Spinner animation="border" /> : renderCountries()}