Question

我目前有一个正在使用 formik 构建的表单。我能够按预期更新每个字段（姓名、电子邮件、电话）。我遇到的问题是当我提供具有状态值的 formik 初始值之一并更新该状态时。更新状态的行为导致表单完全重置输入字段有没有办法在不重置整个表单的情况下更新测试状态？我的代码如下：

import { useState } from "react";
import { Formik, FieldArray } from "formik";
import "./styles.css";

export default function App() {
  const [test, setTest] = useState(null);
  return (
    <Formik
      enableReinitialize
      initialValues={{
        test: test,
        name: "",
        email: "",
        phone: ""
      }}
    >
      {({
        values,
        touched,
        errors,
        handleChange,
        handleBlur,
        handleSubmit
      }) => (
        <>
          <button onClick={() => setTest("something")}>Update State</button>
          <br />
          <input
            placeholder="name"
            type="text"
            name="name"
            value={values.name}
            onChange={handleChange}
          />
          <br />
          <input
            placeholder="email"
            type="text"
            name="email"
            value={values.email}
            onChange={handleChange}
          />
          <br />
          <input
            placeholder="phone"
            type="text"
            name="phone"
            value={values.phone}
            onChange={handleChange}
          />
          <>
            <pre style={{ textAlign: "left" }}>
              <strong>Values</strong>
              <br />
              {JSON.stringify(values, null, 2)}
            </pre>
            <pre style={{ textAlign: "left" }}>
              <strong>Errors</strong>
              <br />
              {JSON.stringify(errors, null, 2)}
            </pre>
          </>
        </>
      )}
    </Formik>
  );
}

为了复制我在代码和框中所说的内容，首先更新姓名、电子邮件和电话号码。然后点击 udate 状态按钮，一切都会被重置

代码沙盒https://codesandbox.io/s/wispy-sun-mzeuy?file=/src/App.js:0-1567

Answer 1

这是因为您在将 enableReinitialize 设置为 true 的情况下初始化 Formik 组件：

<块引用>

enableReinitialize?: boolean

默认为假。控制 Formik 是否应在 initialValues 更改时重置表单（使用深度相等）。

当状态变量 test 更新时，formik-values 被重新初始化为 initialValues 中设置的值。

如果你想让这个工作，我已经 forked your sandbox 并修改它以使用 formik 钩子（没有 enableReinitialize）结合 useEffect 手动更新状态的值:

  const [test, setTest] = useState(null);
  const { values, errors, handleChange, setFieldValue } = useFormik({
    initialValues: {
      test: test,
      name: "",
      email: "",
      phone: ""
    }
  });

  useEffect(() => {
    setFieldValue("test", test);
  }, [test]);

使用状态更新 Formik 初始值之一会重置所有其他值

1 个答案: