Nextjs 将 prop 从服务器组件传递到客户端组件时出错

Question

我正在从数据库获取数据并通过客户端组件渲染它（因为它将添加 useState），但仅在传递 prop 时才会出现错误。我不知道发生了什么事。

'use server'

import { Exam } from '@/db/models/exam';
import { ExamPaper } from './client-exam-paper';

const ExamPage = async ({ params }) => {
  const exam = await Exam.findById(params.examId);

  // client component 
  return <ExamPaper exam={exam} />; // error
  return <ExamPaper />; // okay
};

export default ExamPage;

./客户考试试卷页面是

'use client';

export function ExamPaper() {
  return <div>asdfghjk</div>;
}

错误是

Error: Maximum call stack exceeded 

Answer 1

在我的代码中 findById 返回一个圆形对象。我只需要把它变成普通对象，用 .lean() 方法作为 props 传递。

'use server'

import { Exam } from '@/db/models/exam';
import { ExamPaper } from './client-exam-paper';

const ExamPage = async ({ params }) => {
  const exam = await Exam.findById(params.examId).lean();   // this is the change 

  return <ExamPaper exam={exam} />;
};

export default ExamPage;

感谢@JulioCesarCervantesMartinez