如何用Hooks重写Formik表单以解决Next.js导出的钩子调用错误？

这个问题我之前也碰到过！在Next.js静态导出场景下，用connect高阶组件包裹包含Formik Field的组件时，很容易触发Hook调用违规的错误——毕竟Field内部依赖了React Hooks，而connect的包裹方式有时候会干扰Hook的调用时机，尤其是在静态导出的流程里。

咱们直接用React Redux提供的useSelector和useDispatch Hooks来重写代码，就能彻底解决这个问题，具体实现如下：

重写后的完整代码 #

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

const UserForm = () => {
  // 用useSelector替代mapStateToProps，获取Redux状态中的用户名称
  const name = useSelector(state => state.users.name);
  // 用useDispatch获取dispatch函数
  const dispatch = useDispatch();

  const handleUpdateName = (values) => {
    dispatch(updateNameForUser(values));
  };

  return (
    <Formik
      initialValues={{ name }}
      onSubmit={handleUpdateName}
    >
      {({ handleSubmit }) => (
        <form onSubmit={handleSubmit}>
          <Field name="name" placeholder="name" component={TextInput} />
          <button type="submit">submit</button>
        </form>
      )}
    </Formik>
  );
};

export default UserForm;

关键修改点说明 #

• 替换connect为Redux Hooks：不再需要mapStateToProps和mapDispatchToProps，直接在组件内部用useSelector读取Redux状态，用useDispatch获取dispatch函数，这是React Redux官方推荐的函数组件写法，和Formik的Hooks兼容度更高。
• 简化组件结构：去掉了connect的包裹层，组件逻辑更直观，也避免了高阶组件可能带来的Hook调用上下文问题。
• 调整提交逻辑：把原来通过props传递的updateName方法，改成直接在组件内部调用dispatch触发action，逻辑更清晰。

为什么这样能解决问题？ #

Formik的Field组件内部使用了React Hooks，而旧代码中connect作为高阶组件，在Next.js静态导出的过程中，可能会导致组件的渲染时机不符合Hooks的调用规则（Hooks必须在函数组件的顶层调用）。改用Redux Hooks后，所有Hook调用都在组件的顶层执行，完全符合React的Hook规则，自然就消除了这个错误。

执行你提到的命令npm install && next build && next export，应该就能顺利完成静态导出了。

内容的提问来源于stack exchange，提问作者Simpleton