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与钩子一起使用？

1 个答案: