Question

我有一个包含 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, é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 };
}

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

Answer 1

await getProducts() 是否返回一个对象数组？ props 期望仅对象。因此，在将代码传递给 props 之前，您可能需要对其进行一些重构。

Answer 2

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

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

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

Answer 3

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

PYTHONPATH

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

3 个答案: