useActionData
最も最近のルートアクションからシリアル化されたデータ、または存在しない場合はundefinedを返します。このフックは、コンテキスト内のルートからのアクションデータのみを返します。親または子ルートのデータにはアクセスできません。
import type { ActionFunctionArgs } from "@remix-run/node"; // または cloudflare/deno
import { json } from "@remix-run/node"; // または cloudflare/deno
import { Form, useActionData } from "@remix-run/react";
export async function action({
request,
}: ActionFunctionArgs) {
const body = await request.formData();
const name = body.get("visitorsName");
return json({ message: `Hello, ${name}` });
}
export default function Invoices() {
const data = useActionData<typeof action>();
return (
<Form method="post">
<input type="text" name="visitorsName" />
{data ? data.message : "Waiting..."}
</Form>
);
}追加のリソース
ガイド
関連API
ディスカッション
- 追加のリソース
目次