Next.js 的每页布局组件没有从 Vercel 的 swr 全局配置中获得价值答案

【问题标题】：Next.js's per page layout component doesn't get value from Vercel's swr global configurationNext.js 的每页布局组件没有从 Vercel 的 swr 全局配置中获得价值
【发布时间】：2021-12-09 08:31:51
【问题描述】：

如果我明确输入提取器，来自 swr 的 useSWR 钩子在任何地方都有效。

const { data } = useSWR("http://...", fetcher);

但是，如果我使用如下所示的 swr 全局配置，useSWR 仅适用于 First 页面，但不适用于 HeaderLayout 组件。我做了一些调试，发现在HeaderLayout 中没有接收到来自 swr 全局配置的值（_app.tsx 中的SWRConfig）即使它被包裹在里面。

我按照这个文档https://nextjs.org/docs/basic-features/layouts#per-page-layouts 进行页面布局实现

// _app.tsx
type NextPageWithLayout = NextPage & {
  getLayout?: (page: React.ReactElement) => React.ReactNode;
};

type AppPropsWithLayout = AppProps & {
  Component: NextPageWithLayout;
};

function MyApp({ Component, pageProps }: AppPropsWithLayout) {
  const getLayout = Component.getLayout ?? ((page) => page);

  return (
    <SWRConfig
      value={{
        fetcher: (resource, init) =>
          fetch(resource, init).then((res) => res.json()),
      }}
    >
      {getLayout(<Component {...pageProps} />)}
    </SWRConfig>
  );
}

// pages/first
const First = () => {
  const [searchInput, setSearchInput] = useState("");
  const router = useRouter();

  const { data } = useSWR("http://...");

  return (
    <div>...Content...</div>
  );
};

First.getLayout = HeaderLayout;

// layout/HeaderLayout
const HeaderLayout = (page: React.ReactElement) => {
  const router = useRouter();
  const { project: projectId, application: applicationId } = router.query;

  const { data } = useSWR(`http://...`);

  return (
    <>
      <Header />
      {page}
    </>
  );
};

有用的链接：

https://nextjs.org/docs/basic-features/layouts#per-page-layouts

https://swr.vercel.app/docs/global-configuration

Next.js context provider wrapping App component with page specific layout component giving undefined data

【问题讨论】：

标签： javascript typescript next.js react-context swr

【解决方案1】：

您的First.getLayout 属性应该是一个接受page 并返回由HeaderLayout 组件包装的页面的函数。

First.getLayout = function getLayout(page) {
    return (
        <HeaderLayout>{page}</HeaderLayout>
    )
}

HeaderLayout 是一个 React 组件，它的第一个参数包含传递给它的 props。您需要稍微修改其签名以匹配此。

const HeaderLayout = ({ children }) => {
    const router = useRouter();
    const { project: projectId, application: applicationId } = router.query;

    const { data } = useSWR(`http://...`);

    return (
        <>
            <Header />
            {children}
        </>
    );
};

【讨论】：

【解决方案2】：

如果您将 Page 声明为 const，则布局不起作用。所以不要const First = () => {...} 做function First() {...}

【讨论】：