使用 axios 响应路由器 Dom 操作答案

【问题标题】：React Router Dom action with axios使用 axios 响应路由器 Dom 操作
【发布时间】：2023-02-22 02:15:21
【问题描述】：

在 react-router 中，我使用 action 在提交表单时向后端发送 post 请求。这些都是工作问题，我想返回来自后端的响应和错误。然后我在 axios 中返回那些并捕获函数，但在 UI 中它显示未定义。

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

  const response = await apiClient.get("/sanctum/csrf-cookie").then((response) => {
    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"),
      })
      .then((response) => {
        return response;
      })
      .catch((errors) => {
        return errors;
      });
  });

  return null;
}

【问题讨论】：

您不仅需要返回response.data;response;，同样的事情也适用于error
@DSDmark 总是返回最后一个 null 返回并不重要。那些其他陈述没有返回。那就是问题所在。
尝试像 return apiClient.post("/register", {...... 和 response.data; 这样返回你的整个帖子请求

标签： reactjs axios react-router

【解决方案1】：

registerAction 操作函数只是将 null 返回给 UI。它应该返回 axios 请求的结果，例如承诺链。

例子：

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

  return apiClient.get("/sanctum/csrf-cookie")
    .then(async (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"),
      });
      return response;
    })
    .catch((error) => {
      return error;
    });
  });
}

或者直接使用async/await/try/catch。

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

  try {
    const response = await apiClient.get("/sanctum/csrf-cookie");
    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"),
    });
    return response;
  } catch(error) {
    return error;
  };
}

【讨论】：