reactjs - Next.js getStaticProps 与 SWR "Error serializing ` .initialData.config.transformRequest[0 ]` returned from ` getStaticProps`"

Question

我正在尝试在 Next.js 环境中使用 SWR。

const Best = (props: InferGetStaticPropsType<typeof getStaticProps>) => {
  const { data } = useSWR('/best', apis.getBestProduct, {
    initialData: props.initialData,
  });

  console.log(data);

  return (
    ...SOME PRESENTER
  );
};

export const getStaticProps: GetStaticProps = async () => {
  const data = await apis.getBestProduct();
  return { props: { initialData: data } };
};

export default Best;

我想用 useSWR与 getStaticprops .
但是这段代码会产生这样的错误。

Server Error
Error: Error serializing `.initialData.config.transformRequest[0]` returned from `getStaticProps` in "/best".
Reason: `function` cannot be serialized as JSON. Please only return JSON serializable data types.

数据来的很好，不知道为什么不行。
我使用的是 MacOS，自定义 Node.js 服务器，这是本地主机。

Answer 1

getStaticProps通过首先使用 JSON 序列化数据将数据发送到前端，也就是说，它将数据从运行时 JavaScript 对象转换为字符串，该字符串可由前端解析为运行时 JavaScript 对象。
但是，JSON 有一定的局限性，其中之一就是不能序列化函数。在您的 data 中的某个地方对象你有一个值是一个函数。在从 getStaticProps 返回之前，您需要清理此数据对象。 .
例如，假设 data.myFunction是一个函数，您可以执行以下操作:

export const getStaticProps: GetStaticProps = async () => {
  const {myFunction, ...data} = await apis.getBestProduct();
  return { props: { initialData: data } };
};

这将删除 myFunction并将所有其他键留在 data 中.