Formik钩子“ useField”抛出错误，指出该组件不是React函数组件

Question

我正在尝试在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;

当我尝试将此组件集成到任何形式的内部时，都会出现以下错误。集成代码如下：

<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)}
                    </pre>
                </Form>
            )
            }
        </Formik>

Answer 1

反应成分必须在PascalCase

中命名

错误是因为您没有遵循React组件的正确命名约定。任何组件，无论是功能组件还是类组件，都应在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"