React Router v7 已發布。 查看文件
useActionData

useActionData

返回來自最近路由 action 的序列化資料,如果沒有則返回 undefined。此 Hook 僅返回上下文路由中的 action 資料,無法存取其他父路由或子路由的資料。

import type { ActionFunctionArgs } from "@remix-run/node"; // or cloudflare/deno
import { json } from "@remix-run/node"; // or 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

討論

文件和範例依據 MIT