带有 SWR 的 getStaticProps “错误序列化从 `getStaticProps` 返回的 `.initialData.config.transformRequest[0]`”

Posted 2023-03-30

【中文标题】带有 SWR 的 getStaticProps “错误序列化从 `getStaticProps` 返回的 `.initialData.config.transformRequest[0]`”

【英文标题】：getStaticProps with SWR "Error serializing `.initialData.config.transformRequest[0]` returned from `getStaticProps`"

【发布时间】：2021-05-25 18:03:39

【问题描述】：

我正在尝试在 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 服务器，这是 localhost。

【参考方案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 中。

【讨论】：

谢谢！在我的数据对象中，有一些函数......