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

Next.js 序列化從`getServerSideProps`返回的`results`時出錯

問題描述

1 個解決方案

解決方案1
0 2022-01-23 10:17:01

解決方案2
-1 2022-07-31 17:48:07

Next.js 序列化從`getServerSideProps`返回的`results`時出錯

問題描述

1 個解決方案

解決方案1 0 2022-01-23 10:17:01

解決方案2 -1 2022-07-31 17:48:07

解決方案1
0 2022-01-23 10:17:01

解決方案2
-1 2022-07-31 17:48:07