Formik 无法与 Next JS 14 应用程序目录一起使用

Question

我尝试使用 Formik 创建一个非常简单的验证表单。我完全按照他们的指南和示例进行操作，但它不起作用。我找不到解决方案（如果我错了，请纠正我）。这是我收到的错误消息：

package.json

{
  "name": "simple-form",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "formik": "^2.4.5",
    "next": "14.1.0",
    "react": "^18",
    "react-dom": "^18",
    "yup": "^1.3.3"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "eslint": "^8",
    "eslint-config-next": "14.1.0",
    "typescript": "^5"
  }
}

福米克代码

<Formik
  initialValues={initialFormValues}
  onSubmit={(values) => console.log(values)}
>
  {({ handleSubmit, handleChange, handleBlur, values }) => (
    <form onSubmit={handleSubmit}>
      <input
        type="email"
        name="email"
        placeholder="email"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.email}
      />
      <input
        type="password"
        name="password"
        placeholder="password"
        onChange={handleChange}
        onBlur={handleBlur}
        value={values.password}
      />
      <button type="submit">dasd</button>
    </form>
  )}
</Formik>

提前致谢

Answer 1

在 Next.js App Router 中 - 默认情况下页面是服务器组件。

出现此问题是因为您尝试在 React 服务器组件中使用面向“客户端”的组件。 Formik 依赖于 React hooks（我们可以在回溯中看到

renderWithHooks

调用）。

服务器组件不支持 React Context，这就是发生错误的原因。

尝试在组件顶部添加

"use client";

语句。

服务器组件中的 React 客户端钩子