Formik hooks "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

React components must be named in PascalCase

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

Formik hooks "useField" 抛出错误说明组件不是 React 函数组件

Formik hooks "useField" throws error stating that the component is not a React function component

javascript

reactjs

formik