useSWR如果我明確輸入 fetcher，來自 swr的鉤子在任何地方都可以使用。
const { data } = useSWR("http://...", fetcher);
但是，如果我使用如下所示的 swr 全域配置，則useSWR僅在First頁面中有效，而在HeaderLayout組件中無效。我做了一些除錯，發現 inHeaderLayout沒有從 swr 全域配置（SWRConfigin _app.tsx）接收值，即使它被包裹在里面。
我按照此檔案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 背景關系提供程式用頁面特定的布局組件包裝 App 組件，提供未定義的資料
uj5u.com熱心網友回復：
您的First.getLayout屬性應該是一個函式，它接受 apage并回傳由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}
</>
);
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/332671.html
標籤：javascript 打字稿 下一个.js 反应上下文 开关
上一篇：拖動檔案并選擇要反應的檔案