Next.js 错误序列化从`getServerSideProps`返回的`results`

Question

我正在使用 Next.js 尝试 getServerSIdeProps 并收到此错误：

错误：序列化从 getServerSideProps 返回的 .results 时出错 在 ”/”。原因：undefined 无法序列化为 JSON。请用 null 或省略此值。

export async function getServerSideProps(context) {
  const genre = context.query.genre;

  const request = await fetch(
    `https://api.themoviedb.org/3${
      requests[genre]?.url || requests.fetchTrending.url
    }`
  ).then((res) =>  res.json());
     
   return {
    props: {
      results: request.results,
    },
  };
}

它昨天工作，但今天我收到了这个错误。任何人都可以帮助我吗？

Answer 1

在将您的数据转换为 JSON 时引发错误，因为值 undefined 无法序列化，换句话说，您无法将具有 undefined 作为其属性之一的值的对象转换为 json。

您需要将 undefined 值转换为 null 值，以便 javascript 能够将其序列化为 JSON（将其转换为 JSON）。

在 javascript 中将 undefined 值转换为 null 的最简单方法是使用名为 Lodash 的库。使用以下命令安装Lodash：

$ npm install lodash
// or
$ yarn add lodash

然后创建以下函数：

import _ from 'lodash';

function prepareForSerializatoin(obj) {
    return obj.mapValues(obj, value => typeof value === 'undefined' ? null : value);
}

最后，在返回响应时使用这个函数：

export async function getServerSideProps(context) {
  const genre = context.query.genre;

  const request = await fetch(
    `https://api.themoviedb.org/3${
      requests[genre]?.url || requests.fetchTrending.url
    }`
  ).then((res) =>  res.json());
     
   return prepareForSerializatoin({
    props: {
      results: request.results,
    },
  });
}