Question

我正在尝试在我的Gatsby应用程序中实现表单，但不断出现以下错误

TypeError：this.props.formik.registerField不是函数

我什至tried都降级了Formik版本，但这没有用。

我目前正在使用Gatsby版本2.13.3，React版本16.8.6和Formik版本1.5.7

FormComponent.js

import React from "react"
import { withFormik, Form, Field } from "formik"

const formComponent = ({ values, errors }) => {
  withFormik({
    mapPropsToValues() {
      return {
        hashtag: "",
      }
    },
    handleSubmit(values) {
      console.log(values)
    },
  })
  return (
    <Form>
      <Field type="text" name="hashtag" />
      <button>Submit</button>
    </Form>
  )
}

export default formComponent

Index.js

import React from "react"
import FormComponent from "../components/FormComponent"
import "../styles/layout.scss"

const IndexPage = () => {
  return (
    <div>
      ...
      <FormComponent />
    </div>
  )
}

export default IndexPage

任何人都可以帮助。

Answer 1

您的用法看起来有问题，withFormik返回一个函数，因此您必须将JSX /组件传递给该函数，例如withFormik({...})(MyComponent)。尝试这样的事情：

const formComponent = ({ values, errors }) => (
  withFormik({
    mapPropsToValues() {
      return {
        hashtag: "",
      }
    },
    handleSubmit(values) {
      console.log(values)
    },
  })(
    <Form>
      <Field type="text" name="hashtag" />
      <button>Submit</button>
    </Form>
  )
)

React Formik TypeError：this.props.formik.registerField不是函数

1 个答案: