如何在Nextjs中导入两个组件

Question

我已经创建了两个组件页眉和页脚。现在我已经调用头组件直接调用index.js文件工作良好。下面的工作页附加标题部分输入图片描述

现在我想将页脚组件导入到index.js文件，但显示错误，需要在http://localhost:3000/(即)首先显示牧人另一个页脚组件，我错过了什么，请解决这个问题。我多参考了两天前的这个概念。

Index.js

import React from 'react';
import Header from './header'
import Footer from './footer'
function Index({posts}) {
return (
<>
<Header posts={posts}/>
<Footer/> 
</>
)
}

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

return {
props: {
posts
},
}
}

export default Index;

Header.js

function Header(props) {
return (
<div Style="background: #f2e7d7;padding: 20px; border: 1px solid #eeca97;border-radius: 10px;">
<h1>Header</h1>
<p>
{props.posts.map((post) =>(
<>
<span>{post.name}</span><span>/</span>
</>
))}
</p>
</div>
)
}
export default Header

Footer.js

import React from 'react';
import FooterApi from './footerApi'
function Footer({postTitle}) {
return (
<>
<FooterApi postTitle={postTitle}/>
</>
)
}
export async function getServerSideProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/posts')
const postTitle = await res.json()
return {
props: {
postTitle
},
}
}
export default Footer;

footerApi.js

function FooterApi(props) {
return (
<div Style="background: #f2e7d7;padding: 20px; border: 1px solid #eeca97;border-radius: 10px;">
<h1>Footer</h1>
<p>
{props.postTitle.map((post) =>(
<>
<span>{post.title}</span>
</>
))}
</p>
</div>
)
}

export default FooterApi

Answer 1

问题是您在组件而不是页面中调用getServerSideProps()。

要解决这个问题，您可以在index.jsgetServerSideProps()中获取数据(postTitle)，然后将其传递到页脚，就像您对Header

所做的那样你的index.js应该看起来像这样(我只是替换了你的代码)

import React from 'react';
import Header from './header';
import Footer from './footer';
function Index({ posts, postTitle }) {
return (
<>
<Header posts={posts} />
<Footer postTitle={postTitle} />
</>
);
}
export async function getServerSideProps() {
const res = await fetch('https://jsonplaceholder.typicode.com/users');
const posts = await res.json();
const resFooter = await fetch('https://jsonplaceholder.typicode.com/posts');
const postTitle = await resFooter.json();
return {
props: {
posts,
postTitle,
},
};
}
export default Index;

和你的footer.js

import React from 'react';
import FooterApi from './footerApi'
function Footer(props) {
return (
<>
<FooterApi postTitle={props.postTitle}/>
</>
)
}
export default Footer;