`action` (操作)

观看 📼 Remix Singles: Data Mutations with Form + action (使用表单 + 操作进行数据更改) 和 Multiple Forms and Single Button Mutations (多个表单和单个按钮更改)

路由 action 是一个仅在服务器端运行的函数，用于处理数据更改和其他操作。如果对你的路由发出非 GET 请求（DELETE、PATCH、POST 或 PUT），则会在 loader (加载器) 之前调用该操作。

actions 与 loaders 具有相同的 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。与调用所有加载程序以构建 UI 的 GET 请求不同，*只调用一个 action*。

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

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

操作网址	路由操作
`/accounts?index`	`app/routes/accounts._index.tsx`
`/accounts`	`app/routes/accounts.tsx`

另请注意，没有 action prop (<Form method="post">) 的表单将自动发布到它们呈现的同一路由，因此仅当你要从索引路由本身以外的其他位置发布到索引路由时，才使用 ?index 参数来消除父路由和索引路由之间的歧义。如果你要从索引路由发布到自身，或从父路由发布到自身，则根本不需要定义 <Form action>，只需省略它：<Form method="post">。

另请参阅

action (操作)

`action` (操作)