时间戳

首页 > 解决方案 > 在 React 中，我如何处理从服务器返回的错误？

reactjs - 在 React 中，我如何处理从服务器返回的错误？

问题描述

我的应用程序中有一个注册表单，可将​​数据提交到我的后端服务器，并带有一个调用我的 API 并处理返回数据的 Redux thunk。现在它实际上只捕获发生在 React/Redux 中的错误。如果服务器返回错误，我的操作创建者会认为该错误是用户记录的一部分并验证我的“用户”，即使我提交了一个空表单。

我的handleSubmit功能（从我的 AuthForm 组件中提取）：

 const handleSubmit = e => {
    e.preventDefault();
    onAuth(formType, state);
    setState(formType === 'login' ? initialStateLogin : initialStateSignup);
    history.push("/");
  }

我的 onAuth 函数（映射到我的 authUser Redux thunk）：

export function authUser(type, userData) {
  return dispatch => {
      return apiCall("post", `/users/${type}`, userData)
        .then(({ jwt, ...user }) => {
          console.log(jwt, user)
          localStorage.setItem("jwtToken", jwt);
          setAuthorizationToken(jwt);
          dispatch(setCurrentUser(user));
          dispatch(removeError());
        })
        .catch(err => {
          console.log(err);
          dispatch(addError(err.message));
        });
  };
}

我的 apiCall 辅助函数：

export async function apiCall(method, path, data) {
  try {
    const res = await axios[method.toLowerCase()](`${API_PATH}${path}`, data);
    return res.data;

  }
  catch(err) {
    console.log(err);
    return err.response.data || "An unknown error occurred";
  }
}

如果我提交一个空表单，我的 Redux 状态如下所示：

currentUser {
  isAuthenticated: true,
  user: {
    error: {
      message: "Could not create user. Please modify parameters and try again."
    }
 }
}

标签： reactjsreduxerror-handling

解决方案

您正在捕捉 API 调用的错误。这会导致您的 catch 回调永远不会触发。删除apiCall.

或者，您可以返回Promise.reject()带有错误数据的 a。

推荐阅读