blogs.map不是next.js应用中的函数错误
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 Home
我的错误是：
typeerror：blogs.map不是函数
我该怎么办？我不知道为什么会出现，因为 最近我使用了类似的方法，但一切都很好 现在，它引发了这样的错误！ 请帮助我进入错误！
这是错误的照片:(
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 Home
I am getting error like:
TypeError: blogs.map is not a function
What should I do? I have no idea why it appeared because,
recently I have used similar method but it all was fine
now it throwing such error!
Please help me in to get the error out!
Here is the photo of the error :(
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您收到的错误意味着
Blogs对象是未定义的，因此，blogs.map也是未定义的，在调用时会引起错误。尝试使用可选链接：
The error you are getting means that the
blogsobject is undefined and thus,blogs.mapis also undefined, raising an error when being called.Try using optional chaining:
访问博客的方式，您需要将博客作为关键传递：
或者您可以做到这一点：
The way you are accessing blogs, you need to pass blogs as a key:
Or you can do this:
更改
getServersideProps，返回有意义的东西，实际上代表您的数据，而不是像数据这样的关键字，它令人困惑。通过返回
{props：{blogdata}}，该组件将接收blogdata作为prop。然后，您需要更改通过道具的组件的输入，现在是
blogdata。注意这里的更改，这里正在使用破坏性。最后，在JSX中还进行无效检查以安全访问对象
，或者
我希望
blogdata是一个数组类型，如果不使用.map仅在数组上使用，则 使用该数组类型。Change the
getServerSidePropslike this, return something meaningful which actually represents your data, not a keyword like data, it's confusing.By returning
{ props: { blogData } }, the component will receiveblogDataas a prop.Then you need to change the input of component where you are passing props, it's now
blogData. Notice the change here, destructuring is being used here.Finally in the jsx also do null check to safely access object
Or
Also I hope
blogDatais an array type, if not convert it to array usingbecause
.maponly works on array.