函数 useActionData

返回最近一次 POST 导航表单提交的操作数据，如果没有则返回 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>
  )
}
Copy