React Router中使用Axios的Action无法返回后端响应与错误问题

你的代码有两个核心问题导致UI拿不到响应/错误信息：

1. 第一个.then回调里没有返回apiClient.post的Promise，所以await apiClient.get(...)得到的response是undefined
2. 函数最后固定返回null，不管请求成功还是失败，UI端自然拿不到任何数据

另外，嵌套的.then/.catch写法容易出错，建议换成async/await风格，代码更直观。

修正后的代码 #

export async function registerAction({ request }) {
  const formData = await request.formData();

  try {
    // 先获取CSRF Cookie，确保后续请求合法
    await apiClient.get("/sanctum/csrf-cookie");
    
    // 发送注册POST请求
    const response = await apiClient.post("/register", {
      first_name: formData.get("first_name"),
      last_name: formData.get("last_name"),
      full_name: formData.get("full_name"),
      email: formData.get("email"),
      // birthday: formData.get("birthday"),
      address: formData.get("home_address"),
      phone_no: formData.get("phone_number"),
      ssn: formData.get("ssn"),
      password: formData.get("password"),
      password_confirmation: formData.get("password_confirmation"),
    });
    
    // 返回成功结果，UI端通过useActionData获取
    return { success: true, data: response.data };
  } catch (error) {
    // 捕获请求错误，返回错误信息
    return { 
      success: false, 
      error: error.response?.data || "请求失败，请稍后重试" 
    };
  }
}

关键修改说明 #

• 用try/catch替代嵌套的.then/.catch，逻辑更清晰
• 确保每个异步请求都用await等待完成，避免Promise丢失
• 成功时返回带success: true和响应数据的对象，失败时返回success: false和错误信息
• 错误处理时优先取后端返回的error.response.data（通常是Laravel返回的验证错误）， fallback到通用错误提示

UI端如何使用 #

在表单组件里用useActionData()获取返回结果：

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

function RegisterForm() {
  const actionData = useActionData();

  return (
    <form method="post">
      {/* 你的表单输入项 */}
      
      {/* 显示错误信息 */}
      {actionData?.success === false && (
        <div className="text-red-500">
          {typeof actionData.error === "object" 
            ? Object.values(actionData.error).flat().join(", ") 
            : actionData.error}
        </div>
      )}
      
      {/* 显示成功提示 */}
      {actionData?.success === true && (
        <div className="text-green-500">注册成功！</div>
      )}
      
      <button type="submit">提交注册</button>
    </form>
  );
}

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