Estoy practicando usar fetch con async y await en React, consultando una API publica de Rick and morty, pero al momento de mostrar los valores me los muestra 2 veces por consola (En la vista aun no muestro nada)
import React from 'react'
const ApiRickAndMorty = () => {
const llamar = async () => {
const url = "https://rickandmortyapi.com/api";
const resp = await fetch(url);
const data = await resp.json();
console.log(data);
}
llamar()
return (
<div>
<h1>Api Rick and Morty</h1>
</div>
)
}
export default ApiRickAndMorty
Intente cambiar la respueta de la funcion a un return y usar un console.log directamente de la llamada de la funcion, pero ahora me muestra en consola un: Promise pending
import React from 'react'
const ApiRickAndMorty = () => {
const llamar = async () => {
const url = "https://rickandmortyapi.com/api";
const resp = await fetch(url);
const data = await resp.json();
return data
}
console.log(llamar());
return (
<div>
<h1>Api Rick and Morty</h1>
</div>
)
}
export default ApiRickAndMorty
async
regresa una promesa. Sugiero implementaruseEffect
para la llamada API, también verificar el ciclo de vida del componente React.