RangeError：超出了 NEXTJS 的最大调用堆栈大小

Question

我还是 Nextjs 的初学者 当我尝试从数据库获取产品时出现范围错误， 我有完全相同的类别代码，完全没有问题......

这是我的 nextjs 服务器操作：

export async function getProducts() {
try {
connectToDB();
return await Product.find({});
} catch (error: any) {
throw new Error(`Failed to catch products : ${error.message}`);
}
}

这是来自我的客户端：

const getAllProducts = async () => {
try {
  const response = await getProducts();
  console.log('response: ', response);
  setProducts(response);
} catch (error) {
  console.log(error);
} useEffect(() => {
getAllProducts()}, []);

有人可以告诉我这里出了什么问题吗？我没有看到循环，并且类别部分的代码完全一样，完全没有问题

Answer 1

在 Nextjs 13/14 中，“超出最大调用堆栈大小”错误通常来自服务器和客户端组件之间的不匹配。

在这种情况下，您的服务器操作似乎没有返回普通对象（这是一个要求），并且可能会抛出此错误。

此错误的另一个常见原因是将服务器组件呈现为客户端组件的子组件。