Reactjs(Nextjs)：无法读取未定义(读取'map') Reactjs(Nextjs)的属性

Question

我想问一下这个错误，我需要你的帮助，因为我在youtube上看到了一个课程，只有我自己才会有这个错误，我不知道为什么。

import Head from 'next/head';
import styles from '../styles/Home.module.css';
import {
    GraphQLClient,
    gql
} from 'graphql-request';
import BlogCard from '../components/BlogCard';

const graphcms = new GraphQLClient("https://api-eu-central-1.graphcms.com/v2/cl3wfrf6agpo701z13eawdfat/master");

const QUERY = gql`

{
  posts{
    id,
    title,
    datePublished,
    slug,
    content{
      html
    }
    author{
      name,
      avatar{
        url
      }
    }
    coverPhoto{
      url
    }
  }
}
`;

export async function getStaticProp() {
    const {
        posts
    } = await graphcms.request(QUERY);
    return {
        props: {
            posts,
        },
        revalidate: 10,
    };
}

export default function Home({
    posts
}) {
    return ( <
        div className = {
            styles.container
        } >
        <
        Head >
        <
        title > Create Next App < /title> <
        meta name = "description"
        content = "Generated by create next app" / >
        <
        link rel = "icon"
        href = "/favicon.ico" / >
        <
        /Head>

        <
        main className = {
            styles.main
        } > {
            posts.map((post) => ( <
                BlogCard title = {
                    post.title
                }
                author = {
                    post.author
                }
                coverPhoto = {
                    post.coverPhoto
                }
                key = {
                    post.id
                }
                datePublished = {
                    post.datePublished
                }
                slug = {
                    post.slug
                } >
                <
                /BlogCard>
            ))
        } <
        /main> < /
        div >
    )
}

我搞错了，我不知道为什么

以下是错误的屏幕截图：

​

​

Answer 1

posts变量可能是空的，您可能需要在迭代之前添加一个检查，如下所示。

​

 <main className={styles.main} > 
 {posts && Array.isArray(posts) && posts.map((post) => ( 
    <BlogCard
      title={post.title}
      author={post.author}
      coverPhoto={post.coverPhoto}
      key={post.id}
      datePublished={post.datePublished}
      slug={post.slug}
     ></BlogCard>
   ))
} 
</main>

​