Estoy programando una aplicación de reacción donde necesito hacer una sola llamada api asíncrona, guardar el resultado en una variable de estado y mostrar el resultado. Estoy usando una instancia de axios donde la respuesta de la llamada api es un objeto anidado. Por ejemplo:
{ kanji: {character: "", stroke:""}, quote: "string" }Hasta ahora tengo el siguiente código donde puedo consolar. registrar el objeto homeData con éxito. Sin embargo, aparece el error: 'TypeError: homeData is undefined'.
const Home = () =>{ const [homeData, setHomeData] = useState({}) const getHomeData = async()=>{ instance.get("/data") .then(res =>{ setHomeData(res.data) }) .catch(error =>{ console.log(error) }) } useEffect(()=>{ getHomeData() }, []) console.log(homeData) return( <> <p>{homeData}<p> </> ) }Esto parece un problema de promesa, pero no estoy seguro de cómo solucionarlo. De forma anticipada, muchas gracias por su ayuda.
Este no es un problema de promesa, tiene que ver con el orden en que se ejecutan los métodos del ciclo de vida. useEffect se ejecuta después de que se procesa el componente. Esto significa que cuando el componente se procesa por primera vez, homeData es un objeto vacío. homeData estará presente en el segundo render. El siguiente código primero verifica si homeData existe, luego, si existe, muestra el carácter kanji. Tenga en cuenta también que no puede simplemente mostrar un objeto sin procesar en el dom, por lo que tendrá que acceder a homeData por propiedad para que se muestre
const Home = () =>{ const [homeData, setHomeData] = useState({}) const getHomeData = async()=>{ instance.get("/data") .then(res =>{ setHomeData(res.data) }) .catch(error =>{ console.log(error) }) } useEffect(()=>{ getHomeData() }, []) console.log(homeData) return( <> <p>{homeData && homeData.kanji.character}<p> </> ) }