javascript - Formik，子组件中的useField()？

Question

我正在开发一个单独的模块，该模块旨在包含支持 HTML 输入元素的 formik。

问题是我无法使用 useFields()钩子(Hook)，因为我的模块组件没有连接到 formik 上下文。

这是我位于不同模块中的组件:

import React from "react";
import PropTypes from "prop-types";
import { useField } from "formik";

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

TextField.propTypes = {
  name: PropTypes.string.isRequired,
  label: PropTypes.string,
  showErrors: PropTypes.bool
};

TextField.defaultProps = {
  label: "",
  showErrors: true
};

export default TextField;

这是我的Formik表格:

<Formik
      initialValues={{
        firstName: "firstName"
      }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
    >
      {formik => (
        <Form>
          <TextField name="firstName" />
          <button type="submit">Submit</button>
        </Form>
      )}
    </Formik>

无论我做什么，我都会收到以下错误:

TypeError: Cannot read property 'getFieldProps' of undefined

有人知道我做错了什么吗？

Answer 1

看the useField docs我希望:

<input {...field} {...props} />

输入组件不需要 {...meta} Prop 。
除此之外，我无法重现您的错误。