Formik перехватывает «useField», выдавая ошибку о том, что компонент не является компонентом функции React - PullRequest
Новая
       0

Formik перехватывает «useField», выдавая ошибку о том, что компонент не является компонентом функции React

1 голос
/ 26 января 2020

Я пытаюсь создать повторно используемый компонент ввода в React v16.12.0 и formik версии 2.1.2. Ниже приведен код для компонента ввода. 

import React from 'react';
import { useField, Form, Formik } from 'formik';

const input = ({label, ...props}) => {
    const [field, meta, helpers] = useField(props);
    return (
        <div>
            <label>
                {label}
            </label>
            <input {...field} {...props} />

        </div>
    )
}

export default input;

Когда я пытаюсь интегрировать этот компонент в любую форму, он выдает ошибку ниже. Код интеграции приведен ниже: 

<code><Formik initialValues={{
            firstName: '',
            lastName:''
        }}
        onSubmit={(data) => {

            console.log(data)
        }}>
            {({values, isSubmitting})=>(
                <Form>
                    <Input label="hello" name="firstName" />
                    <button type="submit">Submit</button>
                    <pre>
                        {JSON.stringify(values)}
)}

Error Message

1 Ответ

1 голос
/ 26 января 2020

Компоненты React должны быть названы в PascalCase

Ошибка в том, что вы не выполнили надлежащее соглашение об именах для компонентов реагирования. Любые компоненты, будь то функциональные или классовые, должны быть названы в PascalCase. Попробуйте переименовать определение входного компонента, например так: 

import React from 'react';
import { useField, Form, Formik } from 'formik';

//  'Input' not 'input"
const Input = ({label, ...props}) => {
    const [field, meta, helpers] = useField(props);
    return (
        <div>
            <label>
                {label}
            </label>
            <input {...field} {...props} />

        </div>
    )
}

export default Input; // <---  'Input' not 'input"
...