使用带有 json 数据的 React 路由器操作

Question

我有这个表单，我可以根据用户输入创建此结构的对象：

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 类型？

Answer 1

这个问题现在已经很老了，但是自从我遇到它以来......

您可以在表单或

fetcher.submit()

调用中指定 enctype="application/json"。然后您可以调用

data = await request.json()

从请求中提取它。