我得到了一个错误:
98 |
99 | <section>
> 100 | {posts.map((post) =>(
| ^
101 | <BlogCard title={post.title}
102 | author={post.author}
103 | coverPhoto={post.coverPhoto}
这是我的代码，我试图找到为什么它不是数组，没有运气，这是我在这里的第一个帖子，所以我不知道我是否像我应该做的。但我没能找到答案。
import Head from 'next/head'
import Navi from '/components/nav.js'
import Header from '/components/header.js'
import Link from 'next/link'
import { GraphQLClient, gql } from 'graphql-request';
import BlogCard from '/components/BlogCard'
const graphcms = new GraphQLClient(
"SomeAPI"
);
const QUERY = gql`
{
posts {
id
title
datepublish
slug
content{
html
}
author{
ime
avatar{
url
}
}
coverPhoto{
url
}
}
}
`;
export async function getStaticProps(){
const {posts} = await graphcms.request(QUERY);
return{
props:{
posts,
},
revalidate:10,
};
}
export default function Home(posts) {
return (
<div >
<Head>
<title>Osnovna Skola Vuk Karadzic</title>
<meta name="description" content="Web sajt OS Vuk Karadzic Rocevic" />
<link rel="icon" href="/Logo,_Os_Vuk_Karadzic_Rocevic.png" />
</Head>
<main >
<section>
<Header />
</section>
<section>
<nav>
<Navi />
</nav>
<div>
<img className='relative -z-10 ' src="naslovnaslika.jpg" alt="slika skolske torbe na stolu" />
</div>
<div className=' text-lg sm:text-2xl sm:opacity-80 cursor-pointer text sm:flex sm:justify-evenly grid place-items-center'>
<Link href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" title="">
<div className=' text-white circle relative sm:-top-32 mt-5 sm:w-96 sm:h-96 w-64 h-64 rounded-full grid place-items-center'>
<img className=' opacity-80 sm:h-72 h-48 ' src='/student-cap-svgrepo-com.svg' alt='next' />
<h1 className='mb-10 opacity-70 '>e-Dnevnik za ucenike</h1>
</div>
</Link>
<Link href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" title="">
<div className=' text-white circle relative sm:-top-32 w-64 max-xl:mt-5 h-64 sm:w-96 sm:h-96 rounded-full grid place-items-center'>
<img className=' opacity-70 sm:h-72 h-48 ' src="family-silhouette-svgrepo-com.svg" alt="" />
<h1 className='mb-10 opacity-70 '>e-Dnevnik za ucenike</h1>
</div>
</Link>
<Link href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" title="">
<div className='text-white circle relative sm:-top-32 w-64 max-xl:mt-5 h-64 sm:w-96 sm:h-96 rounded-full grid place-items-center'>
<img className=' opacity-70 sm:h-72 h-48 ' src="business-person-silhouette-wearing-tie-svgrepo-com.svg" alt="" />
<h1 href="https://e-dnevnik.edu.ba/Account/Login?ReturnUrl=%2F" className='mb-20 opacity-70 '>e-Dnevnik za ucenike
</h1>
</div>
</Link>
</div>
</section>
<section>
{posts.map((post) =>(
<BlogCard title={post.title}
author={post.author}
coverPhoto={post.coverPhoto}
key={post.id}
datepublish={post.datepublish}
slug={post.slug}/>
))}
</section>
</main>
</div>
)
}
我不明白为什么会发生错误，当我遵循在线教程并多次检查所有内容时…
这是BlogCard代码:
import Link from 'next/link'
import styles from '/styles/BlogCard.module.css'
export default function BlogPost({title, author, coverPhoto, datepublish,slug}){
return(
<div className={styles.card} >
<Link href={'/posts/' + slug}>
<div className={styles.imgContainer}>
<img src="{coverPhoto.url" alt="" />
</div>
</Link>
</div>
)
}
我刚刚在主页上添加了{}的帖子。谢谢你的重播