我用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;
}
让我知道,如果你看到任何错误,我可以做...谢谢:)
1条答案
按热度按时间gzszwxb41#
你的数据名是不等价的。
组件获取的属性是articlesStrapi,从getStaticProps返回的属性是articlesFromStrapi。
下面是正确的代码:
或者在getStaticProps中更改属性名称: