next.js 如何在下一个js13路由处理程序中获取表单数据

z9gpfhce  于 2023-06-05  发布在  其他
关注(0)|答案(2)|浏览(230)

我正在使用下一个js 13路由处理程序来获取登录表单数据。我想我应该能够使用formData方法获得它,但它返回一个空对象。我在app/login/page.jsx中的登录页面:

export default function Page() {
    return (
        <div>
            <form action="/api" method="post" className="...">
                <input type="text" name="username" id="username" className="..." />
                <input type="password" name="password" id="username" className="..." />
                <input type="submit" id="submit" value="submit" className="..." />
            </form>
        </div>
    )
}

app/API/route.js:

import { NextResponse } from 'next/server';

export async function POST(request):
    const data = request.formData();
    return NextResposne.json({ data })

这是我提交表格后的回复:

{"data":{}}

有想法吗?谢谢。

hsgswve4

hsgswve41#

.formData返回Promise

(method) Body.formData(): Promise<FormData>

你应该等待它:

const data = await request.formData();
wqsoz72f

wqsoz72f2#

您必须从Response创建一个新对象,如果不是,则将其转换为字符串。

import { NextApiRequest, NextApiResponse } from "next";

export async function POST(req: NextApiRequest, res: NextApiResponse) {
const data = await request.formData();
return new Response(JSON.stringify(data))

}

另外,请不要使用ninja code,这不是一个好的编码方式。
请添加另一个安全选项,在不分析输入数据的情况下获取表单数据是非常危险的。

相关问题