范围错误 Next js 中超出了最大调用堆栈大小

Question

我正在使用 shadc-ui 创建一个概念克隆 [https://ui.shadcn.com/] 当（登陆）- 路由器和 _components 创建时。组件来自 shadcn-ui。

这是我的图片：

layout.js :

import "./globals.css";

const inter = Inter({ subsets: ["latin"] });

export const metadata = {
  title: "Notion",
  description: "The connected workspace Notion",
  icons: {
    icon: [
      {
        media: "(prefers-color-scheme:light)",
        url: "/logo.png",
        href: "/logo.png",
      },
      {
        media: "(prefers-color-scheme:dark)",
        url: "/logo-dark.png",
        href: "/logo-dark.png",
      },
    ],
  },
};

export default function RootLayout({ children }) {
  return (
    <html lang="en" supressHydrationWarning>
      <body className={inter.className}>{children}</body>
    </html>
  );
}

layout.jsx：

import React from "react";

const MarketingLayout = ({ children }) => {
  return (
    <div>
      <main>{children}</main>
    </div>
  );
};

export default MarketingLayout;

标题.jsx：

import React from "react";

const Heading = () => {
  return (
    <div className="min-h-full flex flex-col dark:bg-[#1F1F1F]">
      <Heading />
    </div>
  );
};


export default Heading;

page.jsx：

import React from "react";

import Heading from "./_components/Heading";

const LandingPage= () => {
    return (
      <div className="min-h-full flex flex-col dark:bg-[#1F1F1F]">
        <Heading />
      </div>
    );
  };
  
  export default LandingPage;

按钮.jsx：

import * as React from "react"
import { Slot } from "@radix-ui/react-slot"
import { cva } from "class-variance-authority";

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "text-primary underline-offset-4 hover:underline",
      },
      size: {
        default: "h-10 px-4 py-2",
        sm: "h-9 rounded-md px-3",
        lg: "h-11 rounded-md px-8",
        icon: "h-10 w-10",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  }
)

const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => {
  const Comp = asChild ? Slot : "button"
  return (
    (<Comp
      className={cn(buttonVariants({ variant, size, className }))}
      ref={ref}
      {...props} />)
  );
})
Button.displayName = "Button"

export { Button, buttonVariants }

上图是错误“范围错误：超出最大调用堆栈大小”

有什么办法可以解决这个问题吗？我从头开始再次尝试，但错误是相同的。

Answer 1

您的

<Heading />

组件 i 中有一个递归调用。 e.您从

<Heading/>

组件内部调用

<Heading/>

组件，该组件调用

<Heading/>

，后者又调用

<Heading/>

组件，依此类推。这意味着该函数将无限期地被调用，直到在某个时刻超过 call stack (= )，从而出现错误。

调用堆栈

调用堆栈是解释器（如网络浏览器中的 JavaScript 解释器）的一种机制，用于跟踪其在调用多个函数的脚本中的位置 - 当前正在运行什么函数以及从该函数内调用什么函数

来自 MDN 文档

import React from "react";

const Heading = () => {
  return (
    <div className="min-h-full flex flex-col dark:bg-[#1F1F1F]">
       {/* Here is where the recursive call happens*/}
       <Heading />
    </div>
  );
};


export default Heading;

因此，您需要做的不是在

<Heading/>

组件中调用

<Heading/>

，或者如果您需要这样做（无论出于何种原因），请提供一些使您脱离递归调用链的条件（所谓的 base递归实现中的情况）。

范围错误 Next js 中超出了最大调用堆栈大小

问题描述投票：0回答：1

1个回答

最新问题

范围错误 Next js 中超出了最大调用堆栈大小

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1