Question

我的应用程序中有一个注册表单，该表单将数据提交到后端服务器，并且Redux thunk调用了我的API并处理了返回的数据。现在，它实际上只捕获了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."
    }
 }
}

Answer 1

您正在捕获API调用的错误。这将导致您的catch回调永远不会触发。删除apiCall中的try / catch块。

或者，您可以返回包含错误数据的Promise.reject()。

在React中，我该如何处理来自服务器的错误？

1 个答案: