Reactjs Formik在React中不显示错误

我试图让验证错误显示在触摸屏上，但由于某些原因，它们没有显示出来。我试着在Formik官方网站上阅读教程，但没有效果。我使用React引导、Formik和Yup进行验证。我做错了什么

导入：

import * as React from 'react';
import { Container, Row, Col, Form } from 'react-bootstrap';
import { Formik } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  companyName: yup
    .string()
    .required('Company Name is required')
    .min(3, 'Minimum 3 characters allowed')
    .max(100, 'Maximum 100 characters allowed'),
});

<Formik
    validationSchema={validationSchema}
    initialValues={{
        companyName: '',
    }}
    onSubmit={() => {}}
>
    {({ errors, touched }) => (
        <Form autoComplete='off'>
            <Form.Group>
                <Form.Label>
                    Company Name <span className='text-danger'>(*)</span>
                </Form.Label>
                <Form.Control type='text' name='companyName' placeholder='Enter Company Name' />
                <Form.Control.Feedback type='invalid'>{errors.companyName}</Form.Control.Feedback>
            </Form.Group>
        </Form>
    )}
</Formik>

验证模式：

import * as React from 'react';
import { Container, Row, Col, Form } from 'react-bootstrap';
import { Formik } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  companyName: yup
    .string()
    .required('Company Name is required')
    .min(3, 'Minimum 3 characters allowed')
    .max(100, 'Maximum 100 characters allowed'),
});

<Formik
    validationSchema={validationSchema}
    initialValues={{
        companyName: '',
    }}
    onSubmit={() => {}}
>
    {({ errors, touched }) => (
        <Form autoComplete='off'>
            <Form.Group>
                <Form.Label>
                    Company Name <span className='text-danger'>(*)</span>
                </Form.Label>
                <Form.Control type='text' name='companyName' placeholder='Enter Company Name' />
                <Form.Control.Feedback type='invalid'>{errors.companyName}</Form.Control.Feedback>
            </Form.Group>
        </Form>
    )}
</Formik>

表格：

import * as React from 'react';
import { Container, Row, Col, Form } from 'react-bootstrap';
import { Formik } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  companyName: yup
    .string()
    .required('Company Name is required')
    .min(3, 'Minimum 3 characters allowed')
    .max(100, 'Maximum 100 characters allowed'),
});

<Formik
    validationSchema={validationSchema}
    initialValues={{
        companyName: '',
    }}
    onSubmit={() => {}}
>
    {({ errors, touched }) => (
        <Form autoComplete='off'>
            <Form.Group>
                <Form.Label>
                    Company Name <span className='text-danger'>(*)</span>
                </Form.Label>
                <Form.Control type='text' name='companyName' placeholder='Enter Company Name' />
                <Form.Control.Feedback type='invalid'>{errors.companyName}</Form.Control.Feedback>
            </Form.Group>
        </Form>
    )}
</Formik>

{}
>
{（{错误，触摸}）=>(
公司名称（*）
{errors.companyName}
)}

您的输入字段似乎未连接到

Formik

。 您可以使用Formik中的

字段

，将输入连接到Formik

import * as React from 'react';
import { Container, Row, Col, Form } from 'react-bootstrap';
import { Formik, Field } from 'formik';
import * as yup from 'yup';

const validationSchema = yup.object({
  companyName: yup
    .string()
    .required('Company Name is required')
    .min(3, 'Minimum 3 characters allowed')
    .max(100, 'Maximum 100 characters allowed'),
});

export default function App() {
  return (
    <Formik
    validationSchema={validationSchema}
    initialValues={{
        companyName: '',
    }}
    onSubmit={() => {}}
>
    {({ errors, touched }) => (
        <Form autoComplete='off'>
            <Form.Group>
                <Form.Label>
                    Company Name <span className='text-danger'>(*)</span>
                </Form.Label>
                <Field type='text' placeholder='Enter Company Name' name="companyName" />
                <Form.Control.Feedback type='invalid'>{errors.companyName}</Form.Control.Feedback>
            </Form.Group>
        </Form>
    )}
</Formik>
  );
}

import*as React from'React'；
从“react bootstrap”导入{Container，Row，Col，Form}；
从'Formik'导入{Formik，Field}；
从“是”以是的形式导入*；
const validationSchema=yup.object({
公司名称：是的
.string（）
.required（'需要公司名称'）
.min（3，“允许至少3个字符”）
.max（100，“最多允许100个字符”），
});
导出默认函数App（）{
返回(
{}}
>
{（{错误，触摸}）=>(
公司名称（*）
{errors.companyName}
)}
);
}

{errors.companyName

->

{errors.companyName}

这是个打字错误，我确实有正确的

{errors.companyName}