コンテンツにスキップ

action

このコンテンツはまだ日本語訳がありません。

action

观看 📼 Remix Singles使用表单 + 操作进行数据突变多个表单和单个按钮突变

路由操作是服务器唯一的功能,用于处理数据变更和其他操作。如果对您的路由发出非 GET 请求(DELETEPATCHPOSTPUT),则操作会在 loader 之前调用。

action 具有与 loader 相同的 API,唯一的区别在于调用它们的时间。这使您能够将有关数据集的所有内容共置在单个路由模块中:读取的数据、呈现数据的组件和数据写入:

import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
import { json, redirect } from "@remix-run/node"; // or cloudflare/deno
import { Form } from "@remix-run/react";
import { TodoList } from "~/components/TodoList";
import { fakeCreateTodo, fakeGetTodos } from "~/utils/db";
export async function action({
request,
}: ActionFunctionArgs) {
const body = await request.formData();
const todo = await fakeCreateTodo({
title: body.get("title"),
});
return redirect(`/todos/${todo.id}`);
}
export async function loader() {
return json(await fakeGetTodos());
}
export default function Todos() {
const data = useLoaderData<typeof loader>();
return (
<div>
<TodoList todos={data} />
<Form method="post">
<input type="text" name="title" />
<button type="submit">Create Todo</button>
</Form>
</div>
);
}

当对 URL 执行 POST 操作时,路由层次结构中的多个路由将与该 URL 匹配。与对加载器执行 GET 操作不同,在对加载器执行 GET 操作时,所有加载器都会被调用来构建 UI,而 仅调用一个操作

调用的路由将是最深层匹配的路由,除非最深层匹配的路由是索引路由。在这种情况下,它将发布到索引的父路由(因为它们共享相同的 URL,所以父路由获胜)。

如果您想要发布到索引路由,请在操作中使用 ?index<Form action="/accounts?index" method="post" />

action urlroute action
/accounts?indexapp/routes/accounts._index.tsx
/accountsapp/routes/accounts.tsx

还要注意,没有动作属性的表单(<Form method="post">)将自动发布到它们呈现的同一路由,因此使用?index 参数来消除父路由和索引路由之间的歧义仅在您从索引路由本身以外的某个地方发布到索引路由时才有用。如果您从索引路由发布到自身,或从父路由发布到自身,则根本不需要定义 <Form action>,只需省略它:<Form method="post">

参见: