Cuando hago una solicitud incorrecta a mi API que no debería devolver nada, bloquea mi aplicación pero no consola. Registra ninguno de los mensajes de error que configuré para axios, en su lugar recibo un montón de errores con respecto al mapa que usé en uno de mis componentes. Parece que no puedo encontrar la causa del error.
El componente con el mapa:
const Viewer=({poem})=>{ return( <> { poem.map((item) => { let author = item.author let title = item.title let lines = item.lines if (author!= undefined && title!= undefined) { return( <> <div className="viewer"> <div className="author">{author}</div> <div className="title">{title}</div> <div className="lines"> {lines.map((line) => <div>{line}</div> )} </div> </div> </> ) } }) } </> ) }Luego, mi página se queda en blanco hasta que la vuelvo a cargar y recibo 3 mensajes de error que dicen que poema.mapa no es una función.
Así es como estoy obteniendo la API:
const searchPoem= (event) => { if(event.key==="Enter") { axios.get("https://poetrydb.org/"+option+"/"+search+"/all") .then(res=>setPoemData(res.data)) .catch((err) => { if (err.response) { console.log(err.response.data) console.log(err.response.status) console.log(err.response.headers) } else if (err.request) { console.log(err.request) } else { console.log('Error', err.message) } }) } }Los resultados se colocan en un div que genera una tarjeta usando mi componente de visor
Intente registrar el poema variable dentro del componente.
Si una API no devuelve nada, la variable poema no existirá en este contexto y, por lo tanto, tampoco lo hará poema.mapa.
Eche un vistazo a la representación condicional: https://reactjs.org/docs/conditional-rendering.html
Puede manejar esto en la función de renderizado con algo similar a lo siguiente.
poem && Viewer(poem)Cuando se llama a .map() en variables que no son de matriz, arrojará un error.
Dado que la página se rompe después de una mala llamada a la API, una forma de evitarlo es verificar si el poem es un Array usando Array.isArray() antes de ejecutar poem.map() .
const Viewer = ({ poem }) => { return ( <> {Array.isArray(poem) // Add extra type checking before rendering ? ( poem.map((item) => { let author = item.author; let title = item.title; let lines = item.lines; if (author != undefined && title != undefined) { return ( <> <div className="viewer"> <div className="author">{author}</div> <div className="title">{title}</div> <div className="lines"> {lines.map((line) => ( <div>{line}</div> ))} </div> </div> </> ); } }) ) : null // or a error message component } </> ); };