Tengo un problema, este problema es tomar un error de mi intento de captura y pasar este mensaje de error a mi componente de alerta personalizado.
A continuación se muestra mi código:
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) }Necesito detectar un mensaje de error que proviene del backend y poner este error dentro de la descripción de mis accesorios en mi error de alerta personalizado. Pero no sé cómo hacer esto. Intenté hacer esto durante algunas horas pero no pude lograr el éxito.
En general, cada vez que desee mutar los valores locales para que se representen en un componente, estará actualizando el estado React.
Mira, ya estás usando el useState para controlar si AlertError se muestra o no con [openError, setOpenError] , solo debes hacer lo mismo con el mensaje de error.
Además, es posible que desee utilizar el propio mensaje de error para controlar la representación de la alerta.
Aquí hay un fragmento de lo que quiero decir:
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> );