如何解决nextjs:序列化从“/prints/[name]”中的`getStaticProps`返回的`.product`时出错
我有一个包含 2 类产品的 Strapi nextjs 应用程序。 在本地一切都很好,但是当我尝试构建时出现此错误:
序列化从 .product
返回的 getStaticProps
时出错
“/打印/[名称]”。原因:undefined
无法序列化为 JSON。
请使用 null
或一起省略此值。
我不明白的是它只涉及一类产品,而代码是相同的。 我知道这不是最好的配置,但我别无他法。
index.js(书籍)
const HomePage = ({ products }) => {
return (
<div>
<Head>
<title>Catalogue</title>
<Meta
name="description"
content="Classe moyenne éditions publie des livres et multiples d'artistes,émergeants ou reconnus,en France et à l'international."
/>
<Meta
name="keywords"
content="Edition d'artiste,Livres,prints,multiples,art books,librairie,concept store,Bookshop,Bookstore"
/>
<Meta name="viewport" content="width=device-width,initial-scale=1.0" />
</Head>
<Catalogue products={products} />
</div>
);
};
export async function getStaticProps() {
const products = await getProducts();
return { props: { products } };
}
export default HomePage;
index.js(打印)
const CataloguePage = ({ products }) => {
return (
<div>
<Head>
<title>Catalogue Prints</title>
<Meta
name="description"
content="Classe moyenne éditions publie des livres et multiples d'artistes,initial-scale=1.0" />
</Head>
<CataloguePrints products={products} />
</div>
);
};
export async function getStaticProps() {
const products = await getProductsPrints();
return { props: { products } };
}
export default CataloguePage;
[名称].js
export default ProductPage;
export async function getStaticProps({ params }) {
const product = await getProductPrints(params.name);
return { props: { product } };
}
// This function gets called at build time
export async function getStaticPaths() {
// Call an external API endpoint to get products
const products = await getProductsPrints();
// Get the paths we want to pre-render based on posts
const paths = products.map(
(product) => `/prints/${product.Name}`
);
// We'll pre-render only these paths at build time.
// { fallback: false } means other routes should 404.
return { paths,fallback: false };
}
如果您也有一些建议可以避免重复几乎相同的代码两次,我很感兴趣。原因是这两个类别有不同的 json 设计
解决方法
await getProducts()
是否返回一个对象数组? props
期望仅对象。因此,在将代码传递给 props 之前,您可能需要对其进行一些重构。
您没有提供 getProducts() 的代码。 我用 axios 试了一下,比如:
let { data } = await axios.get(url)
基本上,您需要来自休息调用的“数据”属性。 或者,你可以试试console.log(getProducts()),看看json的结构。
,就我而言,我必须正确解析响应并且它运行良好。分享您的 ..
代码会很有帮助,以便我们了解其响应的性质。但与此同时,试试这个:
PYTHONPATH
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。