Remix项目路由无法获取formData的问题及解决方法

问题描述 #

开发Remix项目时，React组件提交表单后，路由的action函数中使用formData.get()无法获取任何字段，日志显示formData为空对象：

formData
formData {}

路由代码 #

export async function action(data: any) {
    const { request } = data;

    console.log(`request`);
    console.log(request);

    const formData = await request.formData();

    console.log(`formData`);
    console.log(formData);
    
    const noteData: Note = {
        title: formData.get("title")?.toString() ?? "",
        description: formData.get("description")?.toString() ?? "",
    };
    const note = createNote(noteData);
    console.log(`New note created => Note - ${JSON.stringify(note)}`);
}

提交表单的React组件代码 #

export default function Note() {
    return (
        <form method="post" action="/notes" id="quote-form">
            <p>
                <label htmlFor="title">Title</label>
                <input type="text" id="title" name="title" required />
            </p>
            <p>
                <label htmlFor="content">Content</label>
                <textarea id="content" name="content" required />
            </p>
            <div>
                <button> Add Note </button>
            </div>
        </form>
    );
}

修复方案 #

1. 修正字段名不匹配 #

组件中textarea的name属性是content，但action函数里尝试获取description字段，两者不匹配导致无法拿到对应值。可二选一修改：

• 要么修改action中的字段名：

  const noteData: Note = {
      title: formData.get("title")?.toString() ?? "",
      description: formData.get("content")?.toString() ?? "",
  };
  

• 要么修改组件中textarea的name为description：

  <textarea id="content" name="description" required />
  

2. 正确查看FormData内容 #

FormData对象直接用console.log打印会显示为空对象，这是控制台的显示特性，并非真的没有数据。要查看实际内容，需遍历FormData：

// 替换原console.log(formData)
formData.forEach((value, key) => {
    console.log(`${key}: ${value}`);
});

3. 规范action函数参数写法（可选） #

Remix的action函数标准写法是直接解构request参数，更清晰规范：

export async function action({ request }: { request: Request }) {
    // 原有逻辑代码
}

完成以上修改后，重新提交表单就能正常获取到表单数据了。

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