捕获错误并放入组件 ReactJS

Question

我有一个问题，这个问题是从我的 try catch 中获取错误并将此消息错误传递给我的自定义警报组件。

下面是我的代码：

 export const Register = () => { 
   const dispatch = useDispatch(); 
   
   const [openError, setOpenError] = useState(false);

   const AlertError = openError ? (
    <Dialog open={openError}>
      <AlertCard
        open={openError}
        handleClose={handleCloseError}
        borderTop="1vh solid red"
        color="black"
        severity="error"
        title="Cadastro falhou"
        description='message' //put here message error
      />
    </Dialog>
  ) : (
    ""
  );

 const formik = useFormik({
    initialValues: {
      email: "",
      password: "",
      first_name: "",
      last_name: "",
      confirmPassword: "",
      newsletter: "",
    },
    validationSchema: validationSchema,
    onSubmit: async (values) => {
      setIsLoading(true)
      dispatch(signupUserPending());
      dispatch(requestConfirmEmailPending());
      try {
        if (document.getElementById("checkbox").checked) {
          values.newsletter = "on";
        }
        const singUpRes = await signup(values);
        dispatch(signupUserSuccess(singUpRes));
        dispatch(getUserSuccess(singUpRes));
        dispatch(getTokenSuccess(singUpRes));

        const confirmEmailRes = await requestConfirmEmail(singUpRes.user.email);
        dispatch(requestConfirmEmailSuccess(confirmEmailRes));
        setOpenSuccess(true);
        navigate("/confirm-token");

      } catch (err) {
        console.log(err.message); //need take this message error
        dispatch(signupUserFailure(err));
        dispatch(requestConfirmEmailFailure(err));
        setIsLoading(false);
        setOpenError(true);
      }
    },
  });

  return ({AlertError}...rest of code)
}

我需要捕获来自后端的消息错误，并将此错误放入我的自定义警报错误的道具描述中。但我不知道该怎么做。我试着做了几个小时，但没能成功。

Answer 1

一般来说，只要你想改变要在组件中呈现的局部值，你就会更新 React 状态。

你看，你已经在使用 useState 钩子来控制 AlertError 是否显示 [openError, setOpenError]，你应该只需要对错误消息做同样的事情.

此外，您可能希望使用错误消息本身来控制警报的呈现。

这里是我的意思的一个片段：

export const Register = () => {
  const [errorMessage, setErrorMessage] = useState("");
  const formik = useFormik({
    onSubmit: async (values) => {
      try {
        await signup(values);
      } catch (err) {
        setErrorMessage(err.message);
      }
    },
  });
  return <AlertError open={!!errorMessage} description={errorMessage} />;
};

const AlertError = ({ open, description, ...rest }) => (
  <Dialog open={open}>
    <AlertCard open={open} description={description} {...rest} />
  </Dialog>
);

捕获错误并放入组件 ReactJS

Catch error and put inside a component ReactJS

javascript

error-handling

reactjs