Question

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

问题是我无法使用useFields()钩子，因为我的模块组件未连接到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：无法读取未定义的属性'getFieldProps'

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

Answer 1

看着 the useField docs 我期望：

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

输入组件不需要 {...meta} 道具。

除此之外，我无法重现您的错误。

Formik，子组件中的useField（）？

1 个答案: