Estoy tratando de recuperar algunos datos de una API. Cuando consuelo los datos funciona bien:
import axios from 'axios'; export default function Model() { const url = "api.blabla.com/blabla" const [model, setModel] = useState() useEffect(() => { const axiosPosts = async () => { const response = await axios(url) setModel(response.data) }; axiosPosts(); }, []); console.log(model.slug) //prints the slug!! return ( <div> {model.slug} : {model.name} // TypeError slug undefined </div> )¿Cuál puede ser el problema con este código?
La API tarda un tiempo en responder, por lo que al inicio se le asigna al model el valor del parámetro que pasó al gancho useState() .
No pasó nada, por lo que durante la primera reacción, el model de renderizado no está definido.
Una solución podría ser cambiar su plantilla a:
{model?.slug} : {model?.name}O hacerlo condicional
{model && ( <> {model.slug} : {model.name} </> )}agregando más a la respuesta anterior de @ploppy, un patrón común aquí sería
import axios from 'axios'; export default function Model() { const url = "api.blabla.com/blabla" const [status, setStatus] = useState("idle"); const [model, setModel] = useState({ slug: "", name: "" }) useEffect(() => { setStatus("pending"); const axiosPosts = async () => { try{ const response = await axios(url) setModel(response.data) setStatus("resolved") }catch(error){ console.log(error); setStatus("rejected"); } }; axiosPosts(); }, []); console.log(model.slug) //prints the slug!! if(status === "pending"){ return (<div>Loading...</div>) } if(status === "rejected"){ return (<div>Something went wrong!</div>) } return ( <div> {model.slug} : {model.name} // TypeError slug undefined </div> )Esto le brinda una buena ventaja para manejar mejor las llamadas API y sus respuestas.