Next.js，getStaticProps不起作用,类型错误：无法读取未定义的属性(正在读取"map")

goqiplq2 于 2023-03-02 发布在其他

关注(0)|答案(2)|浏览(293)

我从create-next-app开始创建了一个项目。在Blog.js页面中，我尝试使用getStaticProps()函数从https://jsonplaceholder.typicode.com/posts获取。
我使用了指南https://nextjs.org/docs/basic-features/data-fetching/get-static-props#using-getstaticprops-to-fetch-data-from-a-cms。一旦所有内容都实现了，我在浏览器中打开页面，它会告诉我

Server Error
TypeError: Cannot read properties of undefined (reading 'map')

这是密码

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default Blog

next.js

来源：https://stackoverflow.com/questions/71452836/next-js-getstaticprops-not-working-typeerror-cannot-read-properties-of-undefi

2条答案

按热度按时间

bq3bfh9z1#

你在你想要呈现的组件中编写函数。2唯一的情况是当你基于某个参数创建动态URL时，在这种情况下你将混合使用getStaticProps和getStaticPages。
试着这样做：
1.将博客组件写入文件（Blog.tsx/jsx）：

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  )
}

export default Blog

1.转到您将呈现此组件的页面（例如，它可能是一个index.tsx/jsx）

import type { NextPage } from "next";
import Blog from 'wherever it is'

const Home: NextPage = ({posts}) => {
  return (
    <>
          <Blog posts={posts}/>    
    </>
  );
};

export async function getStaticProps() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts')
  const posts = await res.json()
  
  return {
    props: {
      posts,
    },
  }
}

export default Home;

Ps.：当你在使用map的时候，千万不要忘记key属性;希望它能帮助你，来自巴西的拥抱。

赞(0）回复(0）举报 2023-03-02

0mkxixxg2#

我认为答案是在Page文件夹之外实现Blog组件。

赞(0）回复(0）举报 2023-03-02