为什么我的 try catch 块不会执行？- 反应

Question

我有一个注册模式，有 3 个步骤。

填写信息、获取激活码和成功消息。

我希望当用户填写输入并单击提交按钮时，如果没有错误，则移动到下一步，但如果有错误，则会React Toastify显示消息。

我的问题是为什么try catch阻止MyComponent不起作用？

PS：我正在使用Formik和Yup

http服务

const handleExpectedError = (response: any) => {
  if (response?.status >= 400 && response?.status < 500) {
    const errors = response?.data?.errors;
    const errPropertyName: string[] = Object.keys(errors);
    toast.error(errors?.[errPropertyName?.[0]]?.[0]);
  }
};

export const handleRegister = async (user: User): Promise<void> => {
  try {
    await axios.post(`${config.apiEndPoint}/auth/register`, user, header);
  } catch ({ response }) {
    handleExpectedError(response);
  }
};

我的组件

  const [step, setStep] = useState(1);
  const formik = useFormik({
    initialValues: {
      firstName: "",
      lastName: "",
      email: "",
      phoneNumber: "",
      password: "",
    },
    onSubmit: (value) => {
      if (terms) {
        handleNextStep(value);
      }
    },
    validationSchema: registerSchema,
  });
  // Event Handler 
  // Value below is a referance to Formik object 
  const handleNextStep = async (value: any) => {
    if (step === 1) {
      try {
        await handleRegister(value);
        setStep(step + 1);
        await handeGetActivateCode({ email: value.email });
      } catch (error) {
        setStep(1);
      }
    }
    if (step !== 1) return setStep(step - 1);
  };

Answer 1

在 httpService 文件中，您使用了 try-catch。在该捕获中，您试图获取大括号中的错误，而不是如果您执行以下操作则这样做。那么 catch 块就会正常工作

export const handleRegister = async (user: User): Promise<void> => {
  try {
    await axios.post(`${config.apiEndPoint}/auth/register`, user, header);
  } catch (response) {
    handleExpectedError(response);
  }
};