无法将数据从getStaticProps传递到NextPage组件

x759pob2  于 2022-11-23  发布在  其他
关注(0)|答案(1)|浏览(95)

我用getStaticProps正确地收到了想要的数据。但是我不明白为什么它们没有传递到BlogPrivate组件。我在另一个文件中有完全相同的结构,它工作得很好...
articlesStrapi始终未定义
下面是代码

import React, { useEffect, useState } from 'react';
import { GetStaticProps, NextPage } from 'next';
import { ArticleStrapi } from '../../@types/next';
import Article from './article';

type articlesStrapiProps = { articlesStrapi: ArticleStrapi[] };

const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesStrapi }) => {
    
console.log(articlesStrapi); ==> return undefined

    

    return (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
            //////
        </div>
    );
};

export const getStaticProps: GetStaticProps<{ articlesFromStrapi: ArticleStrapi[] }> = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
    const { data } = await res.json();
    const articlesFromStrapi: ArticleStrapi[] = data;

    return !articlesFromStrapi
        ? { notFound: true }
        : {
                props: { articlesFromStrapi },
                revalidate: 10 // In seconds
          };
};

export default BlogPrivate;

在getStaticProps中有一个articlesFromStrapi的控制台日志结果:

[
  {
    id: 1,
    attributes: {
      title: 'Article 1dgdrgdr',
      createdAt: '2022-11-22T13:28:16.243Z',
      updatedAt: '2022-11-22T18:02:50.096Z',
      publishedAt: '2022-11-22T13:49:16.161Z',
      content: 'dfdsf sdf ds '
    }
  },
  {
    id: 6,
    attributes: {
      title: 'fdsfdsf',
      createdAt: '2022-11-22T18:01:47.759Z',
      updatedAt: '2022-11-22T18:01:48.440Z',
      publishedAt: '2022-11-22T18:01:48.438Z',
      content: 'dsf sdf dsf dsf dsf dsf dsf dsf '
    }
  }
]

下面是我的界面:

export interface ArticleStrapi {
    id: string;
    attributes: Article;
}

export interface Article {
    title: string;
    content: string;
    createdAt: string;
    publishedAt: string;
    updatedAt: string;
}

让我知道,如果你看到任何错误,我可以做...谢谢:)

gzszwxb4

gzszwxb41#

你的数据名是不等价的。
组件获取的属性是articlesStrapi,从getStaticProps返回的属性是articlesFromStrapi。
下面是正确的代码:

const BlogPrivate: NextPage<articlesStrapiProps> = ({ articlesFromStrapi }) => {
    
console.log(articlesFromStrapi); ==> return undefined

    

    return (
        <div style={{ display: 'flex', flexDirection: 'row' }}>
            //////
        </div>
    );
}

或者在getStaticProps中更改属性名称:

export const getStaticProps: GetStaticProps<{ articlesFromStrapi: ArticleStrapi[] }> = async () => {
    const res = await fetch(`${process.env.NEXT_PUBLIC_BACKEND}api/articles`);
    const { data } = await res.json();
    const articlesFromStrapi: ArticleStrapi[] = data;

    return !articlesFromStrapi
        ? { notFound: true }
        : {
                props: { articlesStrapi: articlesFromStrapi },
                revalidate: 10 // In seconds
          };
};

相关问题