useActionData

useActionData

摘要

参考文档 ↗

返回最近一次 `POST` 导航表单提交中的 `action` 数据,如果没有提交,则返回 `undefined`。

import { Form, useActionData } from "react-router";

export async function action({ request }) {
  const body = await request.formData();
  const name = body.get("visitorsName");
  return { message: `Hello, ${name}` };
}

export default function Invoices() {
  const data = useActionData();
  return (
    <Form method="post">
      <input type="text" name="visitorsName" />
      {data ? data.message : "Waiting..."}
    </Form>
  );
}

签名

function useActionData<T = any>(): SerializeFrom<T> | undefined

返回

从路由的 `action` 函数返回的数据,如果还没有调用过 `action`,则为 `undefined`

文档和示例 CC 4.0
编辑