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的值，换句话说，您无法将未定义的对象作为其属性之一的值转换为 json。

您需要将undefined的值转换为 javascript 的null值，以便能够将其序列化为 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);
}

最后，在返回响应时使用此 function：

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,
    },
  });
}

Answer 2

我有着同样的问题。 我像底部一样更改了我的代码。

但它不起作用。

index.js

import Head from 'next/head'
import Header from '../components/Header'
import Nav from '../components/Nav'
import Result from '../components/Result'
import requests from '../utils/requests'
import _ from 'lodash'

export default function Home(props) {
  console.log(props);
  return (
    <div>
      <Head>
        <title> Hulu 2.0</title>
        <link rel="icon" href="/favicon.ico" />
      </Head>

      <Header/>
      <Nav />
      <Result />
    </div>
  )
}

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,
    },
  });
}

类型错误： obj.mapValues is not a function