从getStaticProps返回的数据显示在控制台上，但不显示在页面jsx上

Question

我试图重写一个项目以前在React与nextjs完成。我有一个简单的页面，它使用getStaticProps和它所需的盟友getStaticPaths。问题是，返回的数据(对象)是可用的，如果我控制台记录它，但不显示在页面jsx上。我已经做了我所知道的一切，但都无济于事。getStaticProps和getStaticpaths如下所示:

export async function getStaticProps(context) {
try {
const slug = context.params.slug;
const response = await fetch(`http://127.0.0.1:8000/api/product/${slug}/`);
const data = await response.json();
return {
props: { product: data },
};
} catch (error) {
console.log(error)  
}
}

export const getStaticPaths = async () => {
try {
const response =  await fetch(`http://127.0.0.1:8000/api/product/list/`);
const data = await response.json();
const allSlugs = data.map(item => item.slug)
const paths= allSlugs.map(slug => ({params:{slug:slug}}))
return {
paths,
fallback: false,
}
} catch (error) {
console.log(error)   
}
}

页面jsx是:

function Product({product}){
console.log(product) // This displays the product quite alright on the console
return <div>
The following did not work (blank), and no error message
<h2>{product.name}</h2>
<p> {product.price}</p>
</div>
}
export default Affidavit

正如我所说的，页面上没有显示任何内容，但也没有任何错误。但令人惊讶的是，返回的对象显示在控制台上。请问，你知道这里有什么问题吗

Answer 1

你可以试试这个吗:

export async function getStaticProps(context) {
try {
const slug = context.params.slug;
const response = await fetch(`http://127.0.0.1:8000/api/product/${slug}/`);
const product = await response.json();
return {
props: { product },
};
} catch (error) {
console.log(error)  
}
}

Answer 2

你应该在产品组件within()中返回你的html。

你的代码看起来像这样:

function Product({product}){
console.log(product) // This displays the product quite alright on the console
return (
<div>
The following did not work (blank), and no error message
<h2>{product.name}</h2>
<p> {product.price}</p>
</div>
)}
export default Affidavit

如果失败，请共享您的console.log()输出。