Next JS:当SSG作为prop传递给生产模式下的组件时，它不起作用

Question

我目前正在研究我的一个项目，当数据作为道具从页面组件传递给子组件时，SSG不起作用。重现这个问题相当困难，所以我会尽力解释清楚。

文件夹结构是这样的

└── pages/
├── home/
│   ├── _slider.tsx
│   └── more .tsx files
├── index.tsx
├── _app.tsx
└── _doucment.tsx

index.tsx为页面，_slider.tsx为index.tsx导入的组件。index.tsx的含量与下图相似:

const Home: React.FC<{ sliderData: IsliderData[] }> = (props) => {
//Refs
const homeRef = useRef<HTMLDivElement>(null);
return (
<div className="home" ref={homeRef}>
<Nav className="home-nav" ref={homeRef} />
<Slider data={props.sliderData} />

</div>
);
};
export const getStaticProps: GetStaticProps = async () => {
//Fetches data and returns the data as sliderData
return {
props: {
sliderData,
},
};
};

_slider.tsx的内容与下图相似:

const Slider: React.FC<{ data: IsliderData[] }> = ({ data }) => {

return (
<div className="slider">
{data.map((card, index) => (
<div>The data is used here</div>
))}
</div>
);
};

现在，所有这些在开发服务器上都工作得很好但是一旦我试图构建应用程序，我就会得到一个错误，说TypeError: Cannot read property 'map' of undefined这个错误指向_slider.tsx中有data.map的行

有办法解决这个问题吗?

我认为在构建生产版本时，获取的数据没有作为道具正确地传递给子组件。这只是我的假设。

任何帮助都非常感谢!

Answer 1

pages目录内的每个文件都是一个页面(_app和_document除外)，当你构建你的应用程序NextJs也将构建/home/_slider.html(即使你用dash标记它并不重要)，但它不能这样做，因为你没有为它提供data道具。

如果你想使用一些组件，但不希望它成为一个页面，你需要把它放在/pages以外的其他地方，例如/components目录，并从那里导入它:

└── components/
├── slider.tsx
└── pages/
├── home.tsx
├── index.tsx
├── _app.tsx
└── _doucment.tsx