React formik 部分更新初始值

问题描述

在我的反应组件中，我有这两个初始值

 const [initialValues,setinitialValues] = useState({
    name: 'Tom',age: 85,});

我有一个文本字段来更改名称字段的值。我有一个按钮可以更改年龄字段。

如果我输入姓名为“Jerry”并按下该按钮来更新年龄，它会将年龄更新为 75 并将姓名“Jerry”再次重置为“Tom”。

This is my code

在文本框中输入 Jerry 并点击按钮以查看它更改为“Tom”

我该如何解决这个问题？

任何帮助！ 提前致谢！ =)

解决方法

您不能将这样的表单值重置为初始值。

您需要做的是使用 Formik 表单引用中的 resetForm() 方法。

您只提供一次初始值，并在需要时重置。

我分叉了你的 codesanbox 并修改了代码。 https://codesandbox.io/s/formik-re-render-initialvalues-forked-i84sy

以下是与您需要执行的操作相关的部分代码

import React,{ useState,useRef } from "react";
...

const Page = () => {
  const formikRef = useRef();

  const setValues = () => {
    console.log("hh");
    setInitialValues({ ...initialValues,age: 75 });
    formikRef.current.resetForm();
  };
  ...
  return (
    <div>
      <button onClick={setValues}>API Call</button>

      <Formik
        ref={(ref) => {
          formikRef.current = ref;
        }}
        initialValues={initialValues}
        onSubmit={submit}
        validationSchema={validationSchema}
        enableReinitialize
      >
        ...
      </Formik>
    </div>
  );
};

编辑 我添加了另一部分，涵盖修改初始值。首先，您需要设置 initialValues，然后再设置 formikRef.current.resetForm()。

注意

如果您将 Formik 升级到 2.x.x ref 更改为 innerRef：

<Formik
  innerRef={(ref) => {
    formikRef.current = ref;
  }}
></Formik>;