使用 Formik 和 Yup 使 ErrorMessage 消失

Question

我想询问是否可以让ErrorMessage组件在一段时间后消失。我一直在尝试使用 setTimeout 来实现这一点，但不幸的是，它似乎没有按预期工作。

感谢您的协助！

const validationSchema = Yup.object().shape({
    inputField: Yup.string().required('Provide a search term.')
})

function Hero() {
    const [errorVisible, setErrorVisible] = useState(true);

    const handleSubmit = async (values, { setSubmitting }) => {
        // Simulate API call
        setTimeout(() => {
            // Show the error message
            setErrorVisible(true);

            setTimeout(() => {
                setSubmitting(false);

                // Hide the error message after 3 seconds
                setErrorVisible(false);
            }, 3000);

        }, 3000);
    }

    return (
        <>
            <section className='hero hero__background' style={{ backgroundImage: `url(${background})` }}>
                <div className='container-u d-flex flex-column justify-content-center h-100'>
                    <div className='hero__info'>

                        <h2 className='text-white'>Learn Something New</h2>
                        <p className='text-white'>All courses at $15</p>
                        <Formik
                            initialValues={{ inputField: '' }}
                            validationSchema={validationSchema}
                            onSubmit={handleSubmit}
                        >
                            {({ isSubmitting }) => (

                                <Form className='hero__form'>


                                    <Field type="text" name="inputField" className="hero__input" />
                                    {errorVisible && <ErrorMessage name='inputField' component="div" className='text-white text-uppercase fw-bold' /> }
                                    <button style={{ backgroundImage: `url(${search})` }} className='hero__button' type='submit' />

                                </Form>
                            )}
                        </Formik>
                    </div>
                </div>
            </section>
        </>
    )
}

Answer 1

这个对我有用。我使用这个常见的错误组件来显示 UI 中的错误。

const ErrorMessage: FC<IErrorMessageProps> = ({ name }) => {
  return (
    <Field name={name}>
      {({ form }: FormikValues) => {
        const error = getIn(form.errors, name);
        const touch = getIn(form.touched, name);
        return (
          <Typography color={'error'} variant="caption">
            {touch && error ? error : null}
          </Typography>
        );
      }}
    </Field>
  );
};

但是，要更新 Formik 的内部状态，您必须使用

values 和 handleChange 属性。那么，只有福米克知道有没有错误。这是它的样子，

<Formik
    initialValues={{ inputField: '' }}
    validationSchema={validationSchema}
    onSubmit={handleSubmit} 
>
        {({ isSubmitting, values, handleChange }) => (
          <Form className="hero__form">
            <Field type="text" name="inputField" className="hero__input" value={values.inputField} onChange={handleChange} />
              <ErrorMessage name="inputField" />
            <button
              style={{ backgroundImage: `url(${search})` }}
              className="hero__button"
              type="submit"
            />
          </Form>
        )}
      </Formik>

现在，每当字段值发生变化时，Formik 都会在内部更新该字段的值。因此，错误组件仅在任何 Yup 验证失败时才会出现，并不表示未发现错误。我希望这能帮助你...