我正在使用 Next.js，我尝试访问数据但收到此错误：
Error: Error serializing `.profileData` returned from `getStaticProps` in "/profile/[slug]".
Reason: `undefined` cannot be serialized as JSON. Please use `null` or omit this value.
我的代码：
import { getAllBusinessProfiles } from '../../lib/api';
const Profile = ({ allProfiles: { edges } }) => {
return (
<>
<Head>
<title>Profile</title>
</Head>
<Hero />
<section>
{edges.map(({ node }) => (
<div key={node.id}>
<Link href={`/profile/${node.slug}`}>
<a> {node.businessInfo.name} </a>
</Link>
</div>
))}
</section>
</>
);
}
export default Profile;
export async function getStaticProps() {
const allProfiles = await getAllBusinessProfiles();
return {
props: {
allProfiles
}
};
}
从 api.js 获取AllBusinessProfiles：
const API_URL = process.env.WP_API_URL;
async function fetchAPI(query, { variables } = {}) {
const headers = { 'Content-Type': 'application/json' };
const res = await fetch(API_URL, {
method: 'POST',
headers,
body: JSON.stringify({ query, variables })
});
const json = await res.json();
if (json.errors) {
console.log(json.errors);
console.log('error details', query, variables);
throw new Error('Failed to fetch API');
}
return json.data;
}
export async function getAllBusinessProfiles() {
const data = await fetchAPI(
`
query AllProfiles {
businessProfiles(where: {orderby: {field: DATE, order: ASC}}) {
edges {
node {
date
title
slug
link
uri
businessInfo {
name
title
company
image {
mediaItemUrl
altText
}
highlight
phone
city
country
facebook
instagram
email
website
profiles {
profile
profileInfo
}
extendedProfile {
title
info
}
}
}
}
}
}
`
);
return data?.businessProfiles;
};
这里可能出现什么错误？我在 Next.js 上使用了 getStaticProps 方法，但收到了上面的错误。请检查。谢谢。
错误： 服务器错误 错误：序列化从“/profile/[slug]”中的
.profileDatagetStaticPropsundefinednull我不知道是什么原因导致的。
JSON.stringify尝试像这样修改你的
getStaticPropsexport async function getStaticProps() {
const profiles = await getAllBusinessProfiles();
const allProfiles = JSON.stringify(profiles)
return {
props: {
allProfiles
}
};
}
方法将 JavaScript 对象或值转换为 JSON 字符串，如果指定了替换函数，则可选择替换值；如果指定了替换数组，则可选择仅包含指定的属性。JSON.stringify()
来源：MDN
我在使用 Mongoose 和 Next.js 时遇到了这个问题。
要解决这个问题：我从convert require切换到import，然后将结果包装在
JSON.parse(JSON.stringify(result));好：
import mongoose from 'mongoose'; 不好：
const mongoose = require('mongoose');在
getStaticProps使用
JSON.stringifyString()export async function getStaticProps() {
const deploymentURL = String(process.env.NEXT_PUBLIC_VERCEL_URL);
return {
props: {
deploymentURL,
},
};
}
感谢这个 GitHub 问题 的启发
当我在 next js 中使用 redux 时，我遇到了同样的问题，原因是默认状态下的字段之一我将其设置为未定义。相反，我使用了
nullconst INITIAL_STATE = {
products: [],
loading: false,
error: undefined,
cart: [],
};
error:undefinedexport async function getStaticProps() {
const allProfiles = await getAllBusinessProfiles();
return {
props: {
allProfiles
}
};
}
您正在返回“allProfiles”，这是异步的结果
getAllBusinessProfiles()您必须使用
undefinednull请注意，该错误准确地显示了哪个变量正在使用
undefinednull值“未定义”表示变量已被声明，但尚未分配任何值。因此，变量的值是“未定义”。另一方面，“null”指的是不存在的对象，基本上意味着“空”或“无”。
来源：[1]
试试这个，它对我有用：
export async function getStaticProps() {
const APP_URL = process.env.PUBLIC_NEXT_WEB_APP_URL;
const res = await fetch(`${APP_URL}/api/projects`);
const projects = await res.json();
return {
props: {
projects: projects?.data,
},
};
}
我在尝试使用 id 在数据数组中查找匹配项时遇到了同样的问题。我遇到的问题是数组中的项目的 id 是数字，而我从 params 获取的值是字符串。所以我所做的就是将数字 id 转换为字符串以匹配比较。
export async function getStaticProps({ params }) {
const coffeeStore = coffeeStoreData.find(
(store) => store.id.toString() === params.slug[0]
);
return {
props: {
coffeeStore,
},
};
}安装名为 babel-plugin-superjson-next 和 superjson 的软件包，并添加包含以下内容的 .babelrc 文件：
{
"presets": ["next/babel"],
"plugins": ["superjson-next"]
}return { props: { allProfiles: allProfiles || null } }
在
getStaticProps() const res = await fetch(`${APP_URL}/api/projects`);
const data = JSON.parse(res);
现在就可以了。
当你调用api时，你应该使用try catch。它将解决错误。
示例：
import axios from "axios";
export const getStaticProps = async () => {
try {
const response = await axios.get("http:...");
const data = response.data;
return {
props: {
posts: data
}
}
} catch (error) {
console.log(error);
}
}
希望对您有帮助！
将 API 中的资源放入大括号中
const { res } = await axios.post("http://localhost:3000/api", {data})
return { props: { res } }
const sanitizedProfile = Profiledata
? JSON.parse(JSON.stringify(Profiledata))
: null;