reactjs 无法读取undefined的属性(阅读'map')Next 13使用getStaticProps

wnavrhmk  于 2023-04-20  发布在  React
关注(0)|答案(1)|浏览(177)

我试图使用getStaticProps从github获取数据以获得更高的性能,即使当我执行“console.log”时,它也会返回此错误,它会返回数组,但我无法Map它,所以我错过了什么
验证码:

"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
    }
  }
}

所以我错过了什么来做这个Map的工作,正如我已经在控制台上说过的,从github返回repos数组。

uajslkp6

uajslkp61#

这是因为,在初始渲染时,你的帖子不可用,所以你必须首先检查未定义的值,如下所示:

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
    }
  }
}

相关问题