Error de rango Se superó el tamaño máximo de la pila de llamadas en Next js

Resuelto Janani asked hace 8 meses • 1 respuestas

Estoy creando un clon de nociones usando shadc-ui [https://ui.shadcn.com/] cuando se crean el enrutador (de aterrizaje) y los _componentes. Los componentes son de shadcn-ui.

Aquí está mi imagen:

ingrese la descripción de la imagen aquí

diseño.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>
  );
}

diseño.jsx:

import React from "react";

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

export default MarketingLayout;

Título.jsx:

import React from "react";

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


export default Heading;

página.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;

botón.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 }

Se excedió el número máximo de llamadas a la pila

ingrese la descripción de la imagen aquí

las imágenes de arriba mostraban el error "error de rango: se excedió el tamaño máximo de la pila de llamadas"

¿Hay alguna manera de solucionar esto? Intenté esto nuevamente desde cero pero el error es el mismo.

Feb 16 '24 21:02 Janani

Aceptado

Tiene una llamada recursiva en su <Heading />componente, es decir, llama al <Heading/>componente desde dentro del <Heading/>componente que llama al componente <Heading/>, que a su vez llama al <Heading/>componente y así sucesivamente. Eso significa que esta función se llamará indefinidamente hasta que se exceda la pila de llamadas en algún momento, de ahí el error.

Pila de llamadas

Una pila de llamadas es un mecanismo para que un intérprete (como el intérprete de JavaScript en un navegador web) realice un seguimiento de su lugar en un script que llama a múltiples funciones: qué función se está ejecutando actualmente y qué funciones se llaman desde dentro de esa función.

de Documentos de 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;

Entonces, lo que debe hacer es no llamar <Heading/>dentro del <Heading/>componente, o si necesita hacerlo (por cualquier motivo), proporcionar alguna condición que lo saque de esa cadena de llamadas recursivas (el llamado caso base en implementaciones recursivas).

Dato curioso: este error en muchos lenguajes de programación se llama error de desbordamiento de pila y, por lo tanto, algunos lenguajes también tienen excepciones con ese nombre, por ejemplo, Java. Además, el error le dio su nombre a este mismo sitio (que, por cierto, se decidió mediante una votación de la comunidad );)

Ver también:

Pila de llamadas - Wikipedia
Recursión (informática) - Wikipedia
Desbordamiento de pila - Wikipedia

Feb 16 '2024 14:02 Mushroomator