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

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 helper函数:

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()。