Remix Run中如何将useFetcher表单提交的返回错误带回表单？

场景与核心问题 #

你在routes/form路由的组件中使用useFetcher提交表单到routes/api/process_form API路由，提交后表单路由的loader会重新加载，但不知道如何将API路由的响应数据传递给这个loader。下面针对你的疑问逐一解答，并给出更优方案：

是否必须通过Session实现？ #

不是必须，但这是一种可行方案。你可以在API路由处理完表单后，将错误信息或响应数据存入Session，再在表单路由的loader中读取Session内容。不过这种方式需要手动管理Session的写入与清理，比如展示完错误后要及时清除对应数据，避免下次路由加载时重复显示。

是否必须将表单提交到父路由？ #

不需要。Remix支持表单提交到任意路由（包括API路由），没必要强制改成提交到父路由。如果表单逻辑与当前路由耦合度高，直接提交到表单路由自身的action处理会更直接，但这和你当前提交到API路由的场景无关。

更优实现方法 #

推荐两种更简洁的方案：

1. 直接通过useFetcher获取响应（无需依赖loader）
   既然使用useFetcher，完全可以在组件内直接通过fetcher.data获取API路由返回的响应，不需要绕路走loader。示例代码：

   import { useFetcher } from "@remix-run/react";
   
   export default function FormComponent() {
     const fetcher = useFetcher();
   
     const handleSubmit = (event) => {
       event.preventDefault();
       const formData = new FormData(event.target);
       fetcher.submit(formData, { 
         method: "POST", 
         action: "/api/process_form" 
       });
     };
   
     // 提交后直接从fetcher.data读取响应数据
     if (fetcher.data?.errors) {
       return (
         <div className="error-message">
           {fetcher.data.errors.map((err) => <p key={err}>{err}</p>)}
         </div>
       );
     }
   
     return (
       <fetcher.Form onSubmit={handleSubmit}>
         {/* 表单内容 */}
         <button type="submit">提交</button>
       </fetcher.Form>
     );
   }
   

   这种方式最直接，适合仅在组件内展示错误或响应结果的场景。

2. 通过URL查询参数传递关键标识，loader按需获取数据
   如果确实需要让loader拿到响应数据，可以在API路由处理完成后，重定向回表单路由并携带查询参数（比如错误标识），再由loader通过该标识从缓存/数据库中读取详细数据。示例：

   • API路由处理逻辑：

     import { redirect } from "@remix-run/node";
     import { cache } from "~/services/cache"; // 假设你有缓存服务
     
     export async function action({ request }) {
       const formData = await request.formData();
       // 表单验证与处理
       const errors = validateForm(formData);
       
       if (errors.length > 0) {
         // 生成临时ID，将错误存入缓存（设置短过期时间）
         const errorId = crypto.randomUUID();
         await cache.set(errorId, JSON.stringify(errors), { expiresIn: 60 });
         // 重定向回表单路由并携带errorId
         return redirect(`/form?errorId=${errorId}`);
       }
     
       // 成功提交后的重定向
       return redirect(`/form?success=1`);
     }
     

   • 表单路由的loader逻辑：

     import { cache } from "~/services/cache";
     
     export async function loader({ request }) {
       const url = new URL(request.url);
       const errorId = url.searchParams.get("errorId");
       let errors = null;
     
       if (errorId) {
         // 从缓存读取错误数据
         errors = JSON.parse(await cache.get(errorId));
         // 读取后删除缓存，避免重复展示
         await cache.del(errorId);
       }
     
       return { errors, success: url.searchParams.has("success") };
     }
     

   这种方式适合需要在loader中预处理响应数据（比如预渲染错误信息）的场景，比Session更轻量，无需长期存储数据。

内容的提问来源于stack exchange，提问作者jon