React Router Dom表单提交报错：form.getData is not a function 求助

你的问题出在FormData对象的方法使用错误，同时组件代码存在两处小问题，具体修正如下：

1. 修正Action中的表单数据获取方式 #

request.formData()返回的是标准浏览器FormData对象，它没有getData()方法，正确获取字段值的方法是get()。

修正后的ActionQuickConnect代码：

export const ActionQuickConnect = async ({ request }) => {
    try {
        const data = await request.formData();
        console.log(data.get('username')); // 使用get方法替代getData
    } catch (e) {
        console.log(e.message);
    }
}

2. 修复组件代码的语法问题 #

你提供的QuickConnect组件存在两处错误：

• Form标签未闭合（</Form缺少>）
• 函数组件未返回JSX内容

修正后的组件代码：

import { Form } from 'react-router-dom';
import React from "react";

export const QuickConnect: React.FC = () => {
    return (
        <Form className="space-y-6" method="post" action="/quick-connect">
            <input id="username" name="username" type="text"/>
        </Form>
    )
}

完成以上修正后，就能正常获取表单提交的username字段值了。

内容的提问来源于stack exchange，提问作者simon