在 Formik 中捕获 React Router 操作的错误

Question

我用 React Router 操作和加载器编写了一个应用程序，后来我将 React Form 更改为 Formik 表单，它使用 useSubmit 钩子发送数据。有什么方法可以捕获操作函数中的错误并将其显示为 formik 错误（使用像“setErrors”函数这样的 formik 帮助程序）？ 目前，我显示单独提交的错误

我的登录组件：

export const Login = () => {
    const data = useActionData<typeof action>()
 return (
 ...
  <LoginForm data={data} />
    )
}

登录表单（片段）：

const LoginForm = (props: { data: ReturnType<typeof useActionData<typeof action>> }) => {
    const submit = useSubmit()
return (
        <Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={(values) => submit(values, { method: "post" })}
        >
            {() => {
                return (
                    < Form
                        className='flex flex-col items-center max-w-sm gap-4 ' >
                        <div className='text-center'>

                            <Field
                                type="email"
                                name="email"
                                required
                                placeholder='Email adress'
                                className='px-3 py-1 mb-1'
                            />
                            <ErrorMessage name="email" component="div" className="text-sm text-red-500" />
                            {(typeof props.data === 'object' && props?.data?.error === 'auth/user-not-found') && <p className="text-sm text-red-500">Incorrect email</p>}
                        </div>

action.tsx：

export async function action({ request }: ActionFunctionArgs) {
    const formData = await request.formData();
    const email = String(formData.get('email'));
    const password = String(formData.get('password'));

    try {
        const data = await signInWithEmailAndPassword(auth, email, password);
        localStorage.setItem('loggedUser', JSON.stringify(data.user.uid))
        return redirect('/projects')
    } catch (error) {
        if (error instanceof Error) return { error: error.code }
        return String(error)
    }
}

我尝试过：

1. 在onSubmit函数中使用props，用try和catch但它不起作用（提交前的props.data未定义，并且在catch块中没有出现错误）
2. 通过 setErrors 函数来提交函数，但它只接受值和选项作为参数

Answer 1

您可以使用

useRouteError

来访问路由加载器和操作返回的错误。您还需要将路由组件渲染为路线的

errorElement

。

示例：

<Route
  path: "/login",
  action: loginAction,
  errorElement: <Login />,
  element: <Login />
/>

或

{
  path: "/login",
  action: loginAction,
  errorElement: <Login />,
  element: <Login />
}

更新

Login

以使用

useRouteError

并有条件地渲染从路由返回的任何错误。

import { useRouteError, useSubmit } from 'react-router-dom';
...

const LoginForm = () => {
  const submit = useSubmit();
  const error = useRouteError(); // <-- access error

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      onSubmit={(values) => submit(values, { method: "post" })}
    >
      {() => {
        return (
          <Form className='flex flex-col items-center max-w-sm gap-4 '>
            {error && /* error UI */} // <-- conditionally render error

            ...
          </Form>
        );
      }
    </Formik>
  );
}