import Head from 'next/head' import { useState } from 'react' import Image from 'next/image' import styles from '../styles/Home.module.css' const Home = (props) => { const [blogs, setblogs] = useState(props.data); return <div className={styles.container}> <Head> <title>BlogsWap</title> <meta name="description" content="New App" /> <link rel="icon" href="/favicon.ico" /> </Head> <main className={styles.main}> <h1 className={styles.title}> Welcome to <a href="https://nextjs.org">BlogsWap!</a> </h1> <p className={styles.description}> An all time blog for coders! </p> {blogs.map((blogitem) => { return <div className={styles.grid}> <a href="https://nextjs.org/docs" className={styles.card}> <h2>{blogitem.title} →</h2> <p>{blogitem.content}</p> </a> </div> })} </main> <footer className={styles.footer}> <a href="https://vercel.com?utm_source=create-next-app&utm_medium=default-template&utm_campaign=create-next-app" target="_blank" rel="noopener noreferrer" > © BlogsWap <span className={styles.logo}> </span> </a> </footer> </div> } export async function getServerSideProps(context) { let totalBlogs = await fetch('http://localhost:3000/api/blogs'); // console.log(totalBlogs) let data = await totalBlogs.json(); return { props: { data }, // will be passed to the page component as props } } export default HomeRecibo un error como:
TypeError: blogs.map is not a function
¿Qué tengo que hacer? No tengo idea de por qué apareció porque, recientemente, he usado un método similar, ¡pero todo estaba bien ahora que arroja ese error! ¡Por favor, ayúdame a eliminar el error!
Aquí está la foto del error :(
El error que está recibiendo significa que el objeto de blogs no está definido y, por lo tanto, blogs.map tampoco está definido, lo que genera un error cuando se lo llama.
Intente usar el encadenamiento opcional:
{blogs?.map((blogitem) => { ...Cambie getServerSideProps de esta manera, devuelva algo significativo que realmente represente sus datos, no una palabra clave como datos, es confuso. Al devolver { props: { blogData } } , el componente recibirá blogData como prop.
let blogData = await totalBlogs.json(); return { props: { blogData }, // will be passed to the page component as props } Luego, debe cambiar la entrada del componente donde está pasando accesorios, ahora es blogData . Observe el cambio aquí, aquí se está utilizando la desestructuración.
const Home = ({ blogData }) => const [blogs, setblogs] = useState(blogData);Finalmente, en el jsx también haga una verificación nula para acceder de forma segura al objeto
{blogs && .... <map goes here> }O
{blogs ? <map goes here> : else show a loader here También espero que blogData sea un tipo de matriz, si no lo convierte en una matriz usando
Array.from(blogData) porque .map solo funciona en una matriz.
De la forma en que accede a los blogs, debe pasar blogs como clave:
let blogs = await totalBlogs.json(); return { props: { data : { blogs } }, // will be passed to the page component as props }O puedes hacer esto:
const [blogs, setblogs] = useState(props);