reactjs - 如何解决React中的 "Invalid hook call"错误

Question

我正在构建一个与 Formik 和 Yup 库 react 的基本表单。该表单包含两个字段，电子邮件和密码；应该从用户那里获取值并将其打印在控制台中。 现在我面临的问题是 Hook 调用错误，即使我在代码中没有使用任何 Hook!

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. ..
2. ..
3. ..

我已经对这个错误进行了研究，并尝试了它建议的所有可能的方法。目前还没有什么帮助。我只运行一个版本的 React，据我所知，我也没有违反钩子(Hook)规则。有人可以帮我检测一下这里的问题吗？

我的代码:

登录表单.js

const validationSchema = Yup.object().shape({
      email: Yup.string()
      .email("Email is not valid")
      .required("Email is required"),
      password: Yup.string()
        .min(6, "Minimum 6 characters required")
        .required("Password is required"),
    })

    class LoginForm extends React.Component {
      render() {
        return (
          <div>
            <Formik
              initialValues={{ email: "", password: "" }}
              validationSchema={validationSchema}
              onSubmit={(values) => this.props.handleFormUpdate(values)}
            >
              <Form>
                <label>
                  Email<Field type="email" name="email"></Field>
                </label>
                <ErrorMessage name="email" component="div"></ErrorMessage>
                <label>
                  Password<Field type="password" name="password"></Field>
                </label>
                <ErrorMessage name="password" component="div"></ErrorMessage>
                <button type="submit">Submit</button>
              </Form>
            </Formik>
          </div>
        );
      }
    }
    export default LoginForm;

App.js

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: "",
      password: "",
    };
  }
  handleFormUpdate(values) {
    console.log(values.email);
    console.log(values.password);
  }
  render() {
    return (
      <div>
        <LoginForm
          handleFormUpdate={this.handleFormUpdate.bind(this)}
        ></LoginForm>
      </div>
    );
  }
}

export default App;

Answer 1

这是因为 formik v2 是构建在 React hooks 之上的。要解决这个问题，您需要将使用 formik 的类组件转换为功能组件。 这是 formik 中重大更改的链接.

[编辑]或者您可以通过使用高阶组件 withFormik()

包装组件来使用 Component 类来实现此操作