blogs.map 不是 next.js 应用程序中的函数错误
[英]blogs.map is not a function error in next.js app
问题描述
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 :(这是错误的照片:(
3 个解决方案
解决方案1
0 2022-05-12 11:58:14
Change the getServerSideProps like this, return something meaningful which actually represents your data, not a keyword like data, it's confusing.像这样更改getServerSideProps ，返回一些有意义的东西，它实际上代表你的数据，而不是像 data 这样的关键字，这很令人困惑。 By returning { props: { blogData } } , the component will receive blogData as a prop.通过返回{ props: { blogData } } ，组件将接收blogData作为 prop。
let blogData = await totalBlogs.json();
return {
props: { blogData }, // will be passed to the page component as props
}
Then you need to change the input of component where you are passing props, it's now blogData .然后你需要改变你传递道具的组件的输入，现在是blogData 。 Notice the change here, destructuring is being used here.注意这里的变化，这里使用了解构。
const Home = ({ blogData }) =>
const [blogs, setblogs] = useState(blogData);
Finally in the jsx also do null check to safely access object最后在 jsx 中也做空检查以安全访问对象
{blogs && ....
<map goes here>
}
Or或者
{blogs ?
<map goes here>
:
else show a loader here
Also I hope blogData is an array type, if not convert it to array using我也希望blogData是数组类型，如果不使用将其转换为数组
Array.from(blogData)
because .map only works on array.因为.map仅适用于数组。
解决方案2
0 2022-05-12 12:00:34
The way you are accessing blogs, you need to pass blogs as a key:您访问博客的方式，您需要将博客作为键传递：
let blogs = await totalBlogs.json();
return {
props: { data : { blogs } }, // will be passed to the page component as props
}
Or you can do this:或者你可以这样做：
const [blogs, setblogs] = useState(props);
解决方案3
0 2022-05-12 12:22:19
The error you are getting means that the blogs object is undefined and thus, blogs.map is also undefined, raising an error when being called.您收到的错误意味着blogs对象未定义，因此blogs.map也未定义，在调用时会引发错误。
Try using optional chaining:尝试使用可选链接：
{blogs?.map((blogitem) => {
...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.