nextjs：序列化从“/prints/[name]”中的“getStaticProps”返回的“.product”时出错答案

【问题标题】：nextjs: Error serializing `.product` returned from `getStaticProps` in "/prints/[name]"nextjs：序列化从“/prints/[name]”中的“getStaticProps”返回的“.product”时出错
【发布时间】：2021-08-06 15:11:47
【问题描述】：

我有一个 Strapi nextjs 应用程序，其中包含 2 类产品。在本地一切都很好，但是当我尝试构建时出现此错误：

序列化从getStaticProps返回的.product时出错 “/打印/[名称]”。原因：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, é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>
      <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 };
}

如果您也有一些建议可以避免重复几乎相同的代码两次，我很感兴趣。原因是 2 个类别有不同的 json 设计

【问题讨论】：

标签： javascript reactjs next.js strapi encodeuricomponent

【解决方案1】：

await getProducts() 是否返回一个对象数组？ props只需要一个对象。因此，在将代码传递给 props 之前，您可能需要稍微重构一下代码。

【讨论】：

是的，一个对象数组。但我不明白的是，为什么它在书上工作得很好，而不是在印刷品上工作得很好，而它几乎是一样的

【解决方案2】：

您没有提供 getProducts() 的代码。我用 axios 试了一下，类似：

let { data } = await axios.get(url)

基本上，您需要来自休息调用的“数据”属性。或者，你可以尝试做console.log(getProducts())，看看json的结构。

【讨论】：

【解决方案3】：

就我而言，我必须正确解析响应并且它运行良好。分享您的 getProductPrints() 代码会很有帮助，以便我们了解其响应的性质。但与此同时，试试这个：

export async function getStaticProps() {
  const res = await getProductPrints();
  const products = await res.json()
  return { props: { products } };
}

【讨论】：