使用 Supabase 构建生产级 Web 应用程序 – 第 2 部分
- Barbara Streisand原创
- 2025-01-20 06:09:09928浏览
我正在阅读 David Lorenz 的书《使用 Supabase 构建生产级 Web 应用程序》（附属链接），并且刚刚完成第 3 章 – 创建票证管理页面...。我遇到了一些问题，我想分享一下这些问题以及我是如何解决这些问题的。
部分：使用 Next.js 设置 Pico.css
您可以忽略 pageProps.children 并将其保留为子项。
部分：构建登录表单
我真的应该将 app/page.js 编辑为 LoginPage 吗？
尽管洛伦兹明确指出：
因此，打开 app/page.js 并更改 Page 组件，使其暂时只返回 Login 组件...
下次遇到编辑LoginPage的指令时，我还是得自己去找。我希望我们创建一个新页面而不是使用现有的 page.js，但是不行，请清除 page.js 中的所有内容并仅粘贴书中给出的 LoginPage 代码。
错误：应该等待 searchParams
使用切换逻辑（用于打开/关闭密码字段）更新 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 专家。
onSubmit 事件去哪里了？
在 Login.js 中的 return( ... ) 中，替换当前的
以上是使用 Supabase 构建生产级 Web 应用程序 – 第 2 部分的详细内容。更多信息请关注PHP中文网其他相关文章！