¿Pueden algunos revisar mi código y ver cuál es el error que he cometido?
Código React y Axios
import React, { useState, useEffect } from "react"; import { useParams, Outlet } from "react-router-dom"; import axios from "axios"; export default function Agent() { const [Agent, setAgent] = React.useState(); const agentid = useParams(); React.useEffect(() => { axios.get(`https://valorant-api.com/v1/agents/`).then((res) => { setAgent(res.data); }); }, []); console.log(Agent); return ( <div> <h1>{agentid.agentid}</h1> </div> ); }resultado del registro de la consola
¿Alguien puede explicar por qué hay un indefinido?
Axios ya devuelve una propiedad de datos, y con la API haciendo eso también terminará siendo así:
setAgent(res.data.data);Se mostrará indefinido al principio debido a que la llamada a la API es asíncrona, por lo tanto, no instantáneamente, por lo que cuando la API haya devuelto su respuesta, está configurando un estado que hace que el componente se vuelva a procesar, por lo tanto, ejecute console.log nuevamente y cualquier cosa fuera del useEffect.
Se espera el primer indefinido. Está esperando que la promesa se resuelva cuando llama a la API, pero mientras tanto, React continúa procesando el Componente. Una vez que se resuelve Promise, se ejecuta la devolución de llamada, que cambia el estado con los datos de la API. Cuando cambia el estado, todo el componente se vuelve a renderizar y puede ver un segundo console.log con los datos reales.
establezca el valor predeterminado en su estado const [Agent, setAgent] = React.useState({}); Tengo el estado predeterminado como objeto vacío. puedes escribir como esperabas objeto simulado
use effect hook llamará después de que el componente sea renderizado inicial. es por eso que el primer registro no está definido.