Как обновить состояние внутри Formik в React?

Question

[Alex Ozerov]

Пытаюсь показать сообщение ошибок в снекбаре material ui.

{errors.email ? handleClickSnackbar(errors.email) : null}

Получаю:

Cannot update a component (`Login`) while rendering a different component (`Formik`).

Как обновить стейт из формика или как передать сообщение ошибки в снекбар?

Component.jsx

const Login = () => {
    const classes = useStyles();
    const classesReg = useStylesReg();
    const snack_classes = useStylesSnack();
    const [open, setOpen] = useState(false);
    const [checked, setChecked] = useState(false);
    const [ type, setType  ] = useState('password');
    const [ emailMessage, setEmailMessage  ] = useState('');
    const isAuth = useSelector(state => state.user.auth)
    const isLoader = useSelector(state => state.user.loader)
    const message = useSelector(state => state.user.message)
    const loader = localStorage.getItem('userAuth') || isLoader;
    const dispatch = useDispatch();
    const handleClickSnackbar = (message) => {
        setEmailMessage(message)
        setOpen(true);
    };
    const handleCloseSnackbar = (event, reason) => {
        if (reason === 'clickaway') {
            return;
        }
        setOpen(false);
    };
    const validationSchema = yup.object().shape({
        email: yup.string().email().typeError(ERRORS.EMAIL_INVALID).required(),
        password: yup.string().required(ERRORS.PASSWORD_INVALID),
    })
    return isAuth ? (
        <Redirect to='/user' />
    ) : (
        loader ? (
                <Loader text='Loading...' />
            ) : (
                <Fragment>
                    <div className={snack_classes.root}>
                        <Snackbar anchorOrigin={{horizontal: 'right', vertical: 'top'}} open={open} autoHideDuration={10000} onClose={handleCloseSnackbar}>
                            <Alert onClose={handleCloseSnackbar} severity="error">
                                {emailMessage}
                            </Alert>
                        </Snackbar>
                    </div>
                    <div className={classes.root} >
                        <Box display={'flex'} className={classes.paper}>
                            <Box className={clsx(classes.element, classes.right__section)}>
                                <div className={classes.form}>
                                    <div className={classes.form__header}>
                                        <h2>Sign in</h2>
                                    </div>
                                    <Formik
                                        onSubmit={values => {
                                            dispatch(login(values.email, values.password))
                                        }}
                                        initialValues={{
                                            email: '',
                                            password: ''
                                        }}
                                        validationSchema={validationSchema}
                                    >{({values, errors, touched, handleChange, handleBlur, isValid, handleSubmit, dirty}) =>(
                                        <form className={classes.form_control}>
                                            <div className={classes.form__section}>
                                                <div className='form__section-item form__section-label'>
                                                    <label htmlFor="emailAdress">Email adress</label>
                                                </div>
                                                <div className='form__section-item '>
                                                    <Textfield
                                                        placeholder='Enter your email'
                                                        value={values.email}
                                                        onChange={handleChange}
                                                        type='email'
                                                        id='emailAdress'
                                                        className={classes.textfield}
                                                        autoComplete={'on'}
                                                        tabIndex='1'
                                                        name='email'
                                                    />
                                                    {errors.email ? handleClickSnackbar(errors.email) : null}
                                                </div>
                                            </div>
                                            <div className={classes.form__section}>
                                                <div className='form__section-item form__section-label'>
                                                    <label htmlFor="password">Password</label>
                                                </div>
                                                <div className='form__section-item '>
                                                    <Textfield
                                                        placeholder='Enter password'
                                                        value={values.password}
                                                        onChange={handleChange}
                                                        type={type}
                                                        id='password'
                                                        className={classes.textfield}
                                                        tabIndex='2'
                                                        name='password'
                                                    />
                                                </div>
                                            </div>
                                            <div className={clsx(classes.form__section, classes.form__section_showPassword)}>
                                                <Checkbox
                                                    checked={checked}
                                                    onChange={handleChangeFlag}
                                                    id='checkbox'
                                                />
                                                <label htmlFor='checkbox' className='form__section-label__text'>Show password</label>
                                            </div>
                                            <div className={clsx(classes.form__section, classes.form__sectionMargin)}>
                                                <Button disabled={!isValid && !dirty} type='submit' onClick={handleSubmit} variant="contained" className='form__section-signin'>
                                                    <span>Sign in</span>
                                                    <ArrowForwardIcon className={classes.arrow} />
                                                </Button>
                                            </div>
                                            <div className={clsx(classes.form__section, classes.form__section_parent)}>
                                                <span className={classes.form__section_divider} />
                                                <span>or</span>
                                                <span className={classes.form__section_divider} />
                                            </div>
                                            <div className={clsx(classes.form__section, classes.form__btn)}>
                                                <GoogleButton onClick={handleSignIn} variant="outlined" />
                                            </div>
                                            <div className={clsx(classes.form__section, classes.form__section_parent, classes.nodisplay)}>
                                                <span className={clsx(classes.form__section_divider, classes.dividerMargin)} />
                                                <span>or</span>
                                                <span className={classes.form__section_divider} />
                                            </div>
                                            <div className={clsx(classes.form__section, classes.form__signup)}>
                                                <a href="/signup">
                                                    <Button variant="contained" >
                                                        <span>Sign up</span>
                                                    </Button>
                                                </a>
                                            </div>
                                        </form>
                                    ) }
                                    </Formik>
                                </div>
                            </Box>
                        </Box>
                    </div>
                </Fragment>
            )
    )
}