0
226
ViewsTypeError: no se puede leer la propiedad de undefined (leyendo 'mapa') mientras se obtiene de la API
Estoy trabajando en un proyecto de sitio de blog de pila completa en el que he creado una API para el back-end y funciona bien y estoy recibiendo publicaciones de él, pero cuando intento iterarlo usando el mapa, aparece el error Server Error TypeError: Cannot read properties of undefined (reading 'map') , estoy usando NextJS para mi front-end.
Código
const Blogs = ({ blogs }) => { return ( <div className='all-blogs'> {blogs.map((blog) => ( <div className='single-blog' key={blog._id}> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> ))} </div> ) } export async function getStaticProps() { const res = await fetch( 'https://ed-blog-api.herokuapp.com/api/posts' ) const blogs = await res.json() return { props: { blogs, }, } } punto final que estoy obteniendo: https://ed-blog-api.herokuapp.com/api/posts
[ ![Resultado de obtención de API a la derecha][1]](https://i.stack.imgur.com/sNL9R.png)
1 answers
Answer question0
El problema aquí es que blogs , como valor de utilería, no está definido hasta que la lógica asincrónica lo define y lo completa. Puedes manejar esto de un par de maneras.
Proporcione un valor prop predeterminado.
const Blogs = ({ blogs = [] }) => { return ( <div className='all-blogs'> {blogs.map((blog) => ( <div className='single-blog' key={blog._id}> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> ))} </div> ) }Proporcione un valor alternativo desde el que mapear.
const Blogs = ({ blogs }) => { return ( <div className='all-blogs'> {(blogs ?? []).map((blog) => ( <div className='single-blog' key={blog._id}> <h1>{blog.title}</h1> <p>{blog.text}</p> </div> ))} </div> ) }
Tenga en cuenta que en el caso de que las solicitudes GET fallen (es decir, la fetch devuelve una Promesa rechazada) o se lanza cualquier otra excepción durante el procesamiento de la solicitud/respuesta, querrá proteger esto usando un try/catch . Proporcione valores prop definidos y válidos para la página, o devuelva que se produjo un error o que no se pudo encontrar el contenido de la página.
export async function getStaticProps() { let blogs = []; try { const res = await fetch('https://ed-blog-api.herokuapp.com/api/posts'); blogs = await res.json(); } catch(error) { // handle error, logging, etc... // maybe optionally returning `notFound: true` as a 404 } return { props: { blogs, }, } }