Formik ErrorMessage 未出现在浏览器上

Question

在这个简单的表单中，我从用户输入中获取描述和类别 (select)。我尝试通过先渲染来显示错误，它工作得很好。

当我使用 formik 的 ErrorMessage 进行重构时，它不再在浏览器上显示错误消息。

我阅读了说明，我的以下代码似乎没有问题。有什么建议或我没有注意到的事情吗？

const initialValues = {
    description: '',
    category: '',
};

const validationSchema = Yup.object({
    description: Yup.string().required('Required'),
    category: Yup.string().required('Required'),
});

const onSubmit = (values) => {
    console.log('Form data', values);
};

const AddForm = () => {
    return (
        <Formik
            initialValues={initialValues}
            ValidationSchema={validationSchema}
            onSubmit={onSubmit}
        >
            <Form className='container'>
                <div className='form-control'>
                    <label htmlFor='description'></label>
                    <Field
                        type='text'
                        id='description'
                        name='description'
                        placeholder='Enter Description...'
                    />
                    <ErrorMessage name='description' />
                </div>

                <div className='form-control'>
                    <label htmlFor='category'></label>
                    <Field name='category' as='select'>
                        <option value='' label='Select Category' />
                        <option value='home' label='Home' />
                        <option value='work' label='Work' />
                        <option value='entertainment' label='Entertainment' />
                    </Field>
                        <ErrorMessage name='category' />
                </div>

                <button type='submit'>Submit</button>
            </Form>
        </Formik>
    );
};

Answer 1

发生这种情况是因为您将 validationSchema 输错为 ValidationSchema 即

<Formik
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={onSubmit}
        >

下面是运行良好的演示：https://codesandbox.io/s/spring-field-ieip1?file=/src/App.js

Formik ErrorMessage 未出现在浏览器上

Formik ErrorMessage not appearing on browser

reactjs

formik