为啥我会收到“错误：序列化从 getStaticProps 返回的 ___ 时出错”？

Posted 2023-03-10

【中文标题】为啥我会收到“错误：序列化从 getStaticProps 返回的 ___ 时出错”？

【英文标题】：Why am I getting 'Error: Error serializing ___ returned from getStaticProps'?为什么我会收到“错误：序列化从 getStaticProps 返回的 ___ 时出错”？

【发布时间】：2021-04-23 02:23:06

【问题描述】：

当我在getStaticProps 内部调用时收到以下错误，我不知道为什么：

Error: Error serializing `.lingo` returned from `getStaticProps` in "/".
Reason: `undefined` cannot be serialized as JSON.

我已将完整的应用代码放在CodeSandbox 上。它无法访问 API，但它确实显示了定义的位置。

当我在 GraphQL 操场上运行以下查询时，我得到了预期的响应：

query 
   allTerms 
      id
      term
      slug
      lead
   

您可以看到该查询包含在沙盒的modules/lingo/services 目录下的lingo.service.js 中，但主页出现Error serializing 错误。我的函数export async function getAll() 不正确还是我在getStaticProps 中调用错误？

【问题讨论】：

任何时候您在错误消息中看到cannot ____ undefined 或类似内容，这是因为您的变量之一在不应该等于未定义时。

【参考方案1】：

await getAll() 很可能返回 undefined，它不是可序列化的 JSON。默认为null 将是解决问题的一种方法。

export async function getStaticProps(context) 
  return 
    props:  lingo: (await getAll()) ?? null ,
  ;

【讨论】：

谢谢。 null 不会返回任何东西吗？有需要响应的项目​​，当在 GraphQL Playground 中查询时它们会得到响应。另一个问题是 lingo.length 现在返回 null 并导致 TypeError: Cannot read property 'length' of null 错误。

您需要围绕它调整您的代码，可能是null。例如，在访问 lingo.length 之前添加额外的检查。或者当它为 null 时甚至根本不渲染某些组件。