我正在閱讀 David Lorenz 的書《使用 Supabase 建立生產級 Web 應用程式》（附屬連結），並且剛完成第 3 章 – 建立票證管理頁面...。我遇到了一些問題，我想分享一下這些問題以及我是如何解決這些問題的。
您可以忽略 pageProps.children 並將其保留為子項。
儘管洛倫茲明確指出：
因此，開啟 app/page.js 並更改 Page 元件，使其暫時只回傳 Login 元件...
下次遇到編輯LoginPage的指令時，我還是得自己去找。我希望我們創建一個新頁面而不是使用現有的 page.js，但是不行，請清除 page.js 中的所有內容並僅貼上書中給出的 LoginPage 程式碼。
使用切換邏輯（用於開啟/關閉密碼欄位）更新 app/Login.js 後，我們開始看到此錯誤：
Error: Route "/" used `searchParams.magicLink`. `searchParams` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis
at LoginPage (src/app/page.js:3:38)
1 | import { Login } from "./Login";
2 | export default function LoginPage({ searchParams }) {
> 3 | const wantsMagicLink = searchParams.magicLink === "yes";
| ^
4 | return <login ispasswordlogin="{!wantsMagicLink}"></login>;
5 | }
為了解決這個問題，我們希望讓 app/page.js 中的 LoginPage 函數異步，如下所示：
import { Login } from "./Login";
export default async function LoginPage({ searchParams }) {
const params = await searchParams;
const wantsMagicLink = params.magicLink === "yes";
return <login ispasswordlogin="{!wantsMagicLink}"></login>;
}
在書中，我們被指示更新 Login.js 中的程式碼，如下所示：
"use client"; import { useRef } from "react"; export const Login = () => { const emailInputRef = useRef(null); const passwordInputRef = useRef(null); return ( ... ) }登入後複製登入後複製
以防萬一這不是完全清楚，您的程式碼應如下所示：
"use client";
import { useRef } from "react";
import Link from "next/link";
export const Login = ({ isPasswordLogin }) => {
const emailInputRef = useRef(null);
const passwordInputRef = useRef(null);
return(
...
)
}
……我們不會改變任何事。本質上，從 return( 開始的所有內容都與以前完全相同。
我上面指出的“大事”是不應該從“next/link”中刪除 import Link；而是添加“使用客戶端”；以及在其之前的 useRef 導入。
附註：也許我們稍後會學習，但我發現在這裡使用 useRef 而不是 useState 有點奇怪，但話又說回來，我不是 Next.js 或 React 專家。
在 Login.js 中的 return( ... ) 中，取代目前的
以上是使用 Supabase 建立生產級 Web 應用程式 – 第 2 部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！
