getServerSideProps 函数响应无法在 Next.js 中序列化为 JSON答案

【问题标题】：getServerSideProps functions response cannot be serialized as JSON in Next.jsgetServerSideProps 函数响应无法在 Next.js 中序列化为 JSON
【发布时间】：2021-07-16 03:21:15
【问题描述】：

我正在构建一个 Next.js 应用程序，其中包含具有动态路由的多个页面。每个页面都有多个对后端的 axios 调用，这些调用是用 useEffect 调用的。我的目标是使用 getServerSideProps 函数来调用这些函数，以提高应用程序的速度以适应更大的用户数据库。

我的问题是当我尝试从数据库接收电子邮件时，我收到错误：

错误：序列化从“/emails”中的 getServerSideProps 返回的 .allEmails.config.transformRequest[0] 时出错。原因：函数无法序列化为 JSON。请仅返回 JSON 可序列化数据类型。

我想接收电子邮件并将其传递到道具中，然后我可以访问页面上的数据。

import React, { useState, useEffect, useContext } from 'react';
import axios from 'axios';
import jsHttpCookie from 'cookie';
import jsCookie from 'js-cookie';

const Emails = ({allEmails}) => {

const [emails, setEmails] = useState(allEmails);

return (
    <></>
  )
}

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const allEmails = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(allEmails, "all data")
  
    return {
        props: {
          allEmails
        }
    }
  }

export default Emails;

【问题讨论】：

错误说明出了什么问题，提供了不可序列化的对象。使用响应数据，而不是响应本身

标签： javascript node.js next.js

【解决方案1】：

allEmails其实是AxiosResponse type，不是你从api获取的数据。它包含不可序列化的东西，如函数等。

要获取您需要访问此响应的data 属性的数据：

export async function getServerSideProps({req, res}) {
    const {token} = jsHttpCookie.parse(req.headers.cookie);
    const response = await axios.get("http://localhost:8000/api/allCompanyEmails");
    console.log(response, "all data")
  
    return {
        props: {
          allEmails: response.data
        }
    }
  }

【讨论】：