# useActionData

此钩子提供前一个导航操作结果的返回值，如果没有提交，则返回 `undefined`。

```tsx
import { useActionData } from "react-router-dom";

function SomeComponent() {
  let actionData = useActionData();
  // ...
}
```

此挂钩最常见的用例是表单验证错误。如果表单不正确，您可以返回错误并让用户重试：

<pre class="language-tsx"><code class="lang-tsx">import {
  useActionData,
  Form,
  redirect,
} from "react-router-dom";

export default function SignUp() {
<strong>  const errors = useActionData();
</strong>
  return (
    &#x3C;Form method="post">
      &#x3C;p>
        &#x3C;input type="text" name="email" />
        {errors?.email &#x26;&#x26; &#x3C;span>{errors.email}&#x3C;/span>}
      &#x3C;/p>

      &#x3C;p>
        &#x3C;input type="text" name="password" />
        {errors?.password &#x26;&#x26; &#x3C;span>{errors.password}&#x3C;/span>}
      &#x3C;/p>

      &#x3C;p>
        &#x3C;button type="submit">Sign up&#x3C;/button>
      &#x3C;/p>
    &#x3C;/Form>
  );
}

export async function action({ request }) {
  const formData = await request.formData();
  const email = formData.get("email");
  const password = formData.get("password");
  const errors = {};

  // validate the fields
  if (typeof email !== "string" || !email.includes("@")) {
    errors.email =
      "That doesn't look like an email address";
  }

  if (typeof password !== "string" || password.length &#x3C; 6) {
    errors.password = "Password must be > 6 characters";
  }

  // return data if we have errors
  if (Object.keys(errors).length) {
<strong>    return errors;
</strong>  }

  // otherwise create the user and redirect
  await createUser(email, password);
  return redirect("/dashboard");
}
</code></pre>
