Estoy trabajando en Next js y estoy tratando de obtener un registro a través de API, pero en este momento recibo el siguiente error
"Cannot read property 'map' of undefined"Aquí está mi código (components/Blog.jsx)
export default function Blog({ people }) { return ( <div> {people.map(person => ( <> <h1>{person.name}</h1> <h2>Website: {person.website}</h2> Email: <code>{person.email}</code> </> ))} </div> ); }; export const getStaticProps = async () => { const response = await fetch('https://jsonplaceholder.typicode.com/users'); const people = await response.json(); return { props: { people } }; };Una posible solución es que antes de devolver su función Blog() haga algo como esto
people = people || []Esto hará que las personas tengan un valor predeterminado para que no se pueda indefinir cuando intente mapearlo.
Después de leer tu problema, entendí que sucede ya sea por el valor indefinido de las personas
export default function Blog({ people }) { return ( <div> {people.map(person => ( <> <h1>{person.name}</h1> <h2>Website: {person.website}</h2> Email: <code>{person.email}</code> </> ))} </div> ); }; export const getStaticProps = async () => { try{ const response = await fetch('https://jsonplaceholder.typicode.com/users'); const people = await response.json(); return { props: { people} } }catch{ return { props: { } } } };