Tengo un componente y obtengo datos de una API ( https://restcountries.eu/rest/v2/all ). Es una matriz de objetos. Quiero pasar parte de la información de ese objeto a un estado, pero se atasca en un bucle.
function AllCountries() { const [countries, setCountries] = useState([]); fetch(`https://restcountries.eu/rest/v2/all`) .then((r) => r.json()) .then((data) => { if (data!== undefined) { data.map((ob) => { setCountries( ...countries,{ flag: ob.flag, name: ob.name, population: ob.population, region: ob.region, capital: ob.capital} ); }); //console.log(countries); } else { alert("Can´t Load Data"); } }); return ( <div>PRUEBA</div> ); }Debe estar envuelto en useEffect :
function AllCountries() { const [countries, setCountries] = useState([]); useEffect(() => { fetch(`https://restcountries.eu/rest/v2/all`) .then((r) => r.json()) .then((data) => { if (data!== undefined) { data.map((ob) => { setCountries( ...countries,{ flag: ob.flag, name: ob.name, population: ob.population, region: ob.region, capital: ob.capital} ); }); //console.log(countries); } else { alert("Can´t Load Data"); } }); },[]); return ( <div>PRUEBA</div> ); } De lo contrario, la fetch se ejecutará cada vez que se represente el componente.
Lectura adicional: https://reactjs.org/docs/hooks-effect.html