nextjs RangeError：超出最大调用堆栈大小

Question

import React from "react";
import "../assets/style/global.scss";
import cookies from "next-cookies";
import client from "../lib/api/client";

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

MyApp.getInitialProps = async (appContext) => {
  const appProps = await MyApp.getInitialProps(appContext);
  const { ctx } = appContext;
  const allCookies = cookies(ctx);
  const token = allCookies["accessToken"];
  if (token !== undefined) {
    client.defaults.headers.Authorization = token;
  }

  return { ...appProps };
};

export default MyApp;

登录时，我们尝试将访问令牌放入 cookie 中，并将 cookie 值放入每个 api 请求的标头中。但我收到这个错误。我该如何修复它？

Answer 1

MyApp.getInitialProps(appContext)您收到该错误是因为您通过调用inside生成了无限循环MyApp.getInitialProps。

只需用调用替换该行App.getInitialProps即可。

// ...
import App from 'next/app'

// ...

MyApp.getInitialProps = async (appContext) => {
    const appProps = await App.getInitialProps(appContext);
    // ...

    return { ...appProps };
};

Answer 2

这曾经发生在我身上，当时我不小心将组件导入到自身中。Layout.js内部有import RightPanel from "./"而不是import RightPanel from "../pages/rightPanel".