英文:
Parameter types in React Router action method
问题
我正在尝试 TypeScript 中的 React Router 教程。代码可以正常工作，但我发现很难确定参数的类型定义，例如：
export async function action({ request, params }) {
const formData = await request.formData();
const updates = Object.fromEntries(formData);
// ...
通过调试，我可以看到变量 request 是 Request 类型，但当尝试导入时我找不到这样的类型。
关于 params 参数也有类似的问题。
可以有人帮助一下困惑的 .NET C# 开发人员吗？
英文:
I'm trying the React Router tutorial in TypeScript. The code works but I find it hard to identify the parameters' type definitions, e.g.
export async function action({ request, params }) {
const formData = await request.formData();
const updates = Object.fromEntries(formData);
...
From debugging I can see the variable request is a type of Request, however I can't find such a type when trying to import.
A similar question regarding the params parameter.
Can someone help a confused .NET C# dev here, please?
答案1
得分: 6
除了
action之外，我们正在讨论的这些API都不是由React Router提供的：request、request.formData、Object.fromEntries都是由Web平台提供的。
Request是Fetch API的一个接口，详情请参阅https://developer.mozilla.org/en-US/docs/Web/API/Request
它在node_modules/typescript/lib/lib.dom.d.ts文件中定义。
路由参数是从动态段中解析出来并传递给您的加载程序。
params的TS类型应该由用户定义。我们可以使用useParams钩子来获取它。
因此，action的完整TS版本应为：
type MyParams = {
contactId: string;
}
async function action({ request, params }: { request: Request; params: MyParams; }) {}
英文:
> Aside from action, none of these APIs we're discussing are provided by React Router: request, request.formData, Object.fromEntries are all provided by the web platform.
Request is an interface of the Fetch API, see https://developer.mozilla.org/en-US/docs/Web/API/Request
It is defined in the node_modules/typescript/lib/lib.dom.d.ts file.
> Route params are parsed from dynamic segments and passed to your loader
params TS type should be defined by the user. We can get it using the useParams hook.
So the complete TS version of action should be:
type MyParams = {
contactId: string;
}
async function action({ request, params }: { request: Request; params: MyParams; }) {}
答案2
得分: 4
你可以使用 react-router 中的 ActionFunction。这样，参数的类型将被正确推断：
import { redirect } from "react-router-dom";
import type { ActionFunction } from "react-router";
export const action: ActionFunction = async ({ request, params }) => {
const formData = await request.formData();
const updates = Object.fromEntries(formData);
await updateContact(params.contactId, updates);
return redirect(`/contacts/${params.contactId}`);
}
如果你想直接为参数定义类型而不是为函数，你可以使用 react-router 中的 ActionFunctionArgs，但我认为这样做没有明显的优势。
（对于 loader 方法，使用 LoaderFunction 类型的方式完全相同。）
英文:
You can use ActionFunction from react-router. That way, the types of the arguments are inferred correctly:
import { redirect } from "react-router-dom";
import type { ActionFunction } from "react-router";
export const action: ActionFunction = async ({ request, params }) => {
const formData = await request.formData();
const updates = Object.fromEntries(formData);
await updateContact(params.contactId, updates);
return redirect(`/contacts/${params.contactId}`);
}
If you want to type the arguments directly instead of the function you could use ActionFunctionArgs from react-router but I don't see an advantage of doing that.
(Using the type LoaderFunction for the loader method works exactly the same.)
答案3
得分: 1
https://tkdodo.eu/blog/react-query-meets-react-router 在集成 React Query 作为新的 React 路由器时，似乎需要 ActionFunctionArgs，如果您希望通过 initialData 获得类型推断的便利。
英文:
https://tkdodo.eu/blog/react-query-meets-react-router in the case of integrating react-query as the new react router stands, it seems that ActionFunctionArgs may be necessary if you want the nicety of type inference via intialData
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论