Next.js getStaticProps 没有返回数据

Question

我正在 Next.js 创建博客并使用 Strapi 无头 CMS 作为后端。

我试图从我用 Strapi 制作的 API 中获取数据。

用于获取我制作的数据 ./client.js

export default class StrapiClient{
constructor(){}
/*API_URL = "http://localhost:1337/api/"*/
async fetchData(path){
   const url = `${process.env.API_URL}${path}`
   const res = await fetch(url)
   const posts = await res.json()

  return posts
}}

并将其导入到 ./components/blog.js

import StrapiClient from '../client'

const Client = new StrapiClient

export const getStaticProps = async () => {
const posts = await Client.fetchData(`articles`)

return{
  props: {
    posts,
  }
    }
};

  const Blog = ({posts}) => {



  return (
    <div>
   
          {posts.data.map((element) => {
            return(
              <div key={element.id}>
                <h1 className=" text-2xl">{element.attributes.title}</h1>
              </div>
            )
          })}
        
    </div>
  );

};

export default Blog;

但是我得到了错误

TypeError: Cannot read properties of undefined (reading 'data')

这是我使用的数据结构

 { 
      "data" : [
       "id" /*string*/
    ]

 }

Answer 1

您需要 await 异步函数从 Promise

获取数据

export const getStaticProps = async () => {
 const posts = await Client.fetchData(`articles`)
 return{
  props: {
    posts,
  }
 }
};

Async functions always return a promise

参考：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function

Answer 2

const posts = Client.fetchData(`articles`)

我认为您需要 await 获取数据。

编辑：

我刚刚注意到您使用的是 getStaticPaths 函数而不是 getStaticProps。能否请您更改名称并重试？

Answer 3

来自 next.js 文档 getStaticPaths method is used to define a list of paths to be statically generated but to fetch data for page you need to use getStaticProps:

export async function getStaticProps() {
  const posts = await Client.fetchData(`articles`);

  return {
    props: {
      posts,
    },
  }
}

或者使用getServerSideProps获取数据而不使用getStaticPaths:

export async function getServerSideProps() {
  const posts = await Client.fetchData(`articles`);
  return { props: { posts } }
}

Next.js getStaticProps 没有返回数据

Next.js getStaticProps not returning data

reactjs

strapi

next.js