我有一个表单，我从用户的输入中创建了一个结构的对象：

interface FormValues {
  amount: number
  expense: boolean
  categories: {
    amount: number
    category_id: number
  }[]
}

字符串
要将其发布到后端，我可以以这种方式使用fetch API：

fetch('/api/transactions/add', {
  method: 'post',
  body: JSON.stringify(values),
})

型
但这并不像React Router希望我做的那样。如果React Router没有自动重新验证前端显示的数据的问题，这会让我不那么烦恼。
相反，React Router考虑到了这些想法，这保证了在提交后在前端显示的所有加载数据的重新验证：

// forms
<Form method="post" action="/transactions/add" />;
<fetcher.Form method="put" action="/transactions/add" />;
// or after some logic
fetcher.submit(formData, options);

型
以这种方式定义的动作：

<Route
  path="/transactions/add"
  element={<AddSong />}
  action={async ({ params, request }) => {
    let formData = await request.formData();
    return fetch('/api/transactions/add', {
      method: 'post',
      body: formData,
    });
  }}
/>

型
问题是FormData被限制为(key: string, value: string)对。因此，我想只发送json对象，如上所述，给出我所拥有的表单值的结构。最重要的是，如果它是json，在后端也更容易处理。
为什么React Router在提交请求时限制我使用formData类型？