Javascript Formik重置回调创建递归问题

我有一个非常简单的formik设置，当用户按下ResetForm按钮时，我需要传递新的初始值。我在跟踪文档，但最终创建了递归问题

formReset（）

作为

onReset

的参数传递给formik。函数被调用了，但我不确定递归发生在哪里

为了您的方便。更改表单值，然后尝试重置表单

App.js

//演示的助手样式
导入“/helper.css”；
从“/helper”导入{MoreResources，DisplayFormikState}；
从“React”导入React；
从“react dom”导入{render}；
从“Formik”导入{Formik}；
从“Yup”导入*作为Yup；
常量formReset=（{resetForm}）=>{
resetForm（{电子邮件：'}）；
}
常量应用=（）=>(
基本{“}
{" "}
演示
{
等待新的承诺（resolve=>setTimeout（resolve，500））；
警报（JSON.stringify（值，null，2））；
}}
onReset={formReset}
validationSchema={Yup.object（）.shape({
电子邮件：Yup.string（）
.email（）
.必需（“必需”）
})}
>
{props=>{
常数{
价值观
感动的，
错误，
肮脏的，
提交，
handleChange，
车把，
手推，
把手套
}=道具；
返回(
电子邮件
{errors.email&&touch.email&&(
{errors.email}
)}
重置
提交
);
}}
);
render（，document.getElementById（“根”））；

编辑： 所以。。。更好的选择是在

useState

中使用

initialValues

，并传递

enableReinitialize

并将状态更改为“重置”表单。这比尝试使用

resetForm

更容易

---

您不需要将函数传递给

onReset

并调用

resetForm

，只需将type

reset

传递给按钮，并使用

Form

组件而不是普通的html

Form

标记即可

表单

组件将处理

handleReset

，当您使用

type=“reset”

按钮时，将触发该设置

{/*其他组件*/}
重置

---

这是一个。

我需要重置为上一个初始化值以外的值。如果您看到我的重置函数，您会注意到我正在将一个对象传递到

resetForm（）

@Sisir，请查看我的编辑。如果您想调用

resetForm（{email:'}）

只需从formik获取函数并在

onClick中调用
。很简单。感谢您的努力，我还更新了我的工作示例，但它仍然重置为传递给
的初始值（您可以检查吗？），而不是使用
resetForm（）
传递的初始值。但是，我准备通过使用
useState（）
并结合
enableReinitialize
将初始状态存储在本地状态来实现这一点。这不是我想要的解决方案，但我无法让formik重置工作。@Sisir我认为这是最简单的方法。在阅读文档时，我真的不明白那是做什么的
resetForm
。在这种情况下，我也会使用
enableReinitialize
。

// Helper styles for demo
import "./helper.css";
import { MoreResources, DisplayFormikState } from "./helper";

import React from "react";
import { render } from "react-dom";
import { Formik } from "formik";
import * as Yup from "yup";

const formReset = (_, {resetForm}) => {
  resetForm({email: ''});
}

const App = () => (
  <div className="app">
    <h1>
      Basic{" "}
      <a
        href="https://github.com/jaredpalmer/formik"
        target="_blank"
        rel="noopener noreferrer"
      >
        Formik
      </a>{" "}
      Demo
    </h1>

    <Formik
      initialValues={{ email: "populate@test.com" }}
      
      onSubmit={async values => {
        await new Promise(resolve => setTimeout(resolve, 500));
        alert(JSON.stringify(values, null, 2));
      }}
      onReset={formReset}
      validationSchema={Yup.object().shape({
        email: Yup.string()
          .email()
          .required("Required")
      })}
    >
      {props => {
        const {
          values,
          touched,
          errors,
          dirty,
          isSubmitting,
          handleChange,
          handleBlur,
          handleSubmit,
          handleReset
        } = props;
        return (
          <form onSubmit={handleSubmit}>
            <label htmlFor="email" style={{ display: "block" }}>
              Email
            </label>
            <input
              id="email"
              placeholder="Enter your email"
              type="text"
              value={values.email}
              onChange={handleChange}
              onBlur={handleBlur}
              className={
                errors.email && touched.email
                  ? "text-input error"
                  : "text-input"
              }
            />
            {errors.email && touched.email && (
              <div className="input-feedback">{errors.email}</div>
            )}

            <button
              type="button"
              className="outline"
              onClick={handleReset}
              disabled={!dirty || isSubmitting}
            >
              Reset
            </button>
            <button type="submit" disabled={isSubmitting}>
              Submit
            </button>

            <DisplayFormikState {...props} />
          </form>
        );
      }}
    </Formik>

    <MoreResources />
  </div>
);

render(<App />, document.getElementById("root"));


<Form>
    {/* other components */}
    <button
      type="reset"
      className="outline"
      disabled={!dirty || isSubmitting}
    >
      Reset
    </button>
</Form>