Next.js：在将props传递给Client组件时，不支持具有toJSON方法的对象

mwngjboj 于 12个月前发布在其他

关注(0)|答案(1)|浏览(97)

我在Next.js App router中使用Sequelize ORM从MySQL数据库中获取一些数据。这是我的方法“getTransactions”返回的内容：

const { rows, count } =  await Transaction.findAndCountAll({
    limit,
    offset,
    where: whereClause,
    order: [['created_at', 'DESC']],
});

return {
    items: rows,
    totalItems: count,
    totalPages: Math.ceil(count / limit),
    currentBalance,
};

字符串
在将此数据传递给客户端组件时，我在控制台中收到以下警告：

警告：服务器组件只能将普通对象传递给客户端组件，不支持带有toJSON方法的对象，请手动转换为简单值后再传递给props。

服务器组件：

const data = await getTransactions({ page, limit, query: search });
return (
    <TransactionsTable response={data} />
);

型
客户端组件：

const TransactionsTable = ({ response }: { response : PaginatedTransactions | null }) => {
    //TSX
}

型
我尝试序列化和重新序列化数据，并确保时间戳（created_at和updated_at）在发送到客户端组件之前转换为日期。现在，它工作正常，没有警告记录到控制台。但我不明白做这些额外的东西的意义。

const data = await getTransactions({ page, limit, query: search });
const serialize = JSON.stringify(data);
const deserialize = JSON.parse(serialize, (key, value) => {
    if (key === "created_at" || key === "updated_at") {
        return new Date(value);
    }
    return value;
}) as PaginatedTransactions | null;

<TransactionsTable response={deserialize} />

型

next.js

来源：https://stackoverflow.com/questions/77395980/next-js-objects-with-tojson-methods-are-not-supported-while-passing-props-to-cl

1条答案

按热度按时间

qlvxas9a1#

您遇到此错误的原因是因为只有以下内容可以传递到客户端组件，反之亦然：

简单的对象和承诺
字符串
数字
布尔值

您只是从您的Angular “传递”到客户端组件的值实际上是通过网络发送的，因此需要是可序列化的。

// this does not work
export default async function ServerComponent() {
  const response = await fetch("..");
  return <ClientComponent data={response} />;
}

// this does work
export default function ServerComponent() {
  const promise = fetch("..");
  return <ClientComponent data={promise} />;
}

// this does work too
export default async function ServerComponent() {
  const json = await (await fetch("..")).json();
  return <ClientComponent data={json} />;
}

字符串
这种范例的一个例外是可以传递给客户端组件的服务器操作（即使也是一种函数），但与前面提到的行为类似，它们只能接受与客户端组件通过其props可以接受的函数参数相同类型的值。

赞(0）回复(0）举报 12个月前

我来回答

Next.js：在将props传递给Client组件时，不支持具有toJSON方法的对象

1条答案

相关问题

热门标签

最新问答