我将如何重写此表单以使 Formik 使用挂钩？

Question

下面是使用 Formik 设计的表单示例。当 Field 在表单中时，尝试从 Next:

导出时出现以下错误

import React from "react";
import { connect } from "react-redux";
import { Formik, Field } from "formik";
import TextInput from "../components/TextInput";
import updateNameForUser from "../utils/updateNameForUser";

const UserForm = (props) => (
  <Formik
    initialValues={{ name: props.name }}
    onSubmit={(values) => props.updateName(values)}
  >
    {({ handleSubmit }) => (
      <form onSubmit={handleSubmit}>
        <Field name="name" placeholder="name" component={TextInput} />

        <button onClick={handleSubmit} type="submit">
          submit
        </button>
      </form>
    )}
  </Formik>
);

const mapDispatchToProps = (dispatch) => ({
  updateName: (values) => dispatch(updateNameForUser(values)),
});
const mapStateToProps = (state) => ({ name: state.users.name });

export default connect(mapStateToProps, mapDispatchToProps)(UserForm);

错误：

Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component.

如何重写以使用钩子来消除错误？

这是 link to a boilerplate codebase。 Git 克隆和运行:

npm install
build next && build export

库版本：

下一个：v9.3.5
Formik: v2.1.2
反应：v16.8.6

Answer 1

我本来打算删除这个问题，但我会为使用错误进行搜索的任何人回答。问题是我的环境使用的是 next 的全局安装版本，而不是 package.json.

中的版本

当您直接运行 next build && next export 而不是通过 npm 脚本运行作为命令时，就会发生这种情况。

我将如何重写此表单以使 Formik 使用挂钩？

How would I rewrite this form to get Formik working with hooks?

reactjs

formik

react-hooks