我正在构建一个包含多个页面的 Next.js 应用程序,并带有动态路由。每个页面都有多个 axios 调用后端,使用 useEffect 调用。我的目标是使用 getServerSideProps 函数来调用这些函数以提高速度,因为应用程序正在扩展以适应更大的用户数据库。
我的问题是当我尝试从数据库接收电子邮件时,出现错误:
错误:序列化从“/emails”中的 getServerSideProps 返回的 .allEmails.config.transformRequest[0] 时出错。 原因:函数无法序列化为 JSON。请仅返回 JSON 可序列化数据类型。
我想接收电子邮件并将其传递到 Prop 中,然后我可以在 Prop 中访问页面上的数据。
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;
最佳答案
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
}
}
}
关于javascript - getServerSideProps 函数响应无法在 Next.js 中序列化为 JSON,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67204170/