英文:
Cannot read properties of undefined (reading 'map') Next 13 Using getStaticProps
问题
你缺少了对返回的数据进行类型转换。在 getStaticProps 函数中，你可以将返回的数据显式地指定为一个包含 name 字段的数组。这样，TypeScript 就知道 posts 是一个数组，可以在组件中进行映射。
你可以在 getStaticProps 中这样修改：
const posts = await res.json() as { name: string }[];
这样你的代码就能正常运行了。
英文:
I was trying to fetch my data from github using getStaticProps for more performance and it returns this error even when I do a "console.log" it returns me the array but I can't map it so what am I missing
code:
"use client";
import { GetStaticProps } from "next";
interface PostGithubProps {
posts: {
name: string
}[]
}
export default function Github({ posts }: PostGithubProps) {
return(
<>
{posts.map(post => {
<p key={post.name}>{post.name}</p>
})}
</>
)
}
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch('https://api.github.com/users/{myuser}/repos')
const posts = await res.json()
return {
props: {
posts
}
}
}
So what am I missing to do this map works, as I already said on console return the array of repos from github.
答案1
得分: 0
因为在初始渲染时，您的帖子尚不可用，所以您必须先检查未定义的值，类似于这样：
import { GetStaticProps } from "next";
interface PostGithubProps {
posts: {
name: string
}[]
}
export default function Github({ posts }: PostGithubProps) {
if(!posts) return <div>Loading...</div>;
return(
<>
{posts.map(post => {
<p key={post.name}>{post.name}</p>
})}
</>
)
}
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch('https://api.github.com/users/{myuser}/repos')
const posts = await res.json()
return {
props: {
posts
}
}
}
英文:
It is because, on the initial render, your posts are not available so you must check for undefined value first something like this :
import { GetStaticProps } from "next";
interface PostGithubProps {
posts: {
name: string
}[]
}
export default function Github({ posts }: PostGithubProps) {
if(!posts) return <div>Loading...</div>;
return(
<>
{posts.map(post => {
<p key={post.name}>{post.name}</p>
})}
</>
)
}
export const getStaticProps: GetStaticProps = async () => {
const res = await fetch('https://api.github.com/users/{myuser}/repos')
const posts = await res.json()
return {
props: {
posts
}
}
}
答案2
得分: 0
在这个新版本的 Next.js 中，我们不再需要使用 getStaticProps 了，这是我的错误 😅。
我像这样解决了它：
interface PostGithubProps {
name: string
}
export default async function Github() {
const response = await fetch(`https://api.github.com/users/{我的用户名}/repos`, {
next: {
revalidate: 60 * 60 * 24, // 24小时
},
})
const repositories = await response.json()
return (
{repositories.map((repos: PostGithubProps) => (
<p key={repos.name}>
{repos.name}
</p>
))}
)
}
英文:
In this new version of Next we don't need getStaticProps anymore my mistake 😅.
I solve it like this:
interface PostGithubProps {
name: string
}
export default async function Github() {
const response = await fetch(`https://api.github.com/users/{myuser}/repos`, {
next: {
revalidate: 60 * 60 * 24, // 24 hours
},
})
const repositories = await response.json()
return (
{repositories.map((repos: PostGithubProps) => (
<p key={repos.name}>
{repos.name}
</p>
))}
)
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论