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

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 状态按钮，一切都会被重置

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

Answer 1

这是因为您正在将 Formik 组件初始化enableReinitialize为true：

enableReinitialize?: boolean

默认为 false。控制如果初始值更改，Formik 是否应重置表单（使用深度相等）。

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

如果您希望它起作用，我已经分叉了您的沙箱并将其修改为使用 formik 钩子（不带enableReinitialize）与 a 结合useEffect手动更新状态值：

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

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