React formik 部分更新初始值答案

【问题标题】：React formik partialy update initial valuesReact formik 部分更新初始值
【发布时间】：2020-12-28 13:35:44
【问题描述】：

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

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

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

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

This is my code

在文本框中输入 Jerry 并点击按钮，看到它变为“Tom”

我该如何解决这个问题？

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

【问题讨论】：

由于第 26 行，名称再次重置为“Tom”：setInitialValues({ ...initialValues, age: 75 });。 initialValues 是 { name: 'Tom', age: 85 }，因此您使用 spread(...) 运算符传播 initialValues，仅覆盖 age 属性，而 name 属性保持为“Tom”。
@Kapobajza 我该如何解决这个问题？
我不太确定你想要达到什么目的？您要提交表单，并且输入字段的值应该与您提交的相同？
我有初始值，当用户输入一些字段时，我想使用 API 调用更新一些初始值。 @Kapobajza
试试这个：只需将第 26 行从 setInitialValues({ ...initialValues, age: 75 }); 更改为：setInitialValues({ name: /* get the value of the name text field */, age: 75 });

标签： javascript reactjs formik formik-material-ui

【解决方案1】：

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

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

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

我分叉了您的代码框并修改了代码。 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.xref改成innerRef：

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

【讨论】：

您好，感谢您的回答，我有初始值，当用户输入一些字段时，我想使用 API 调用更新一些初始值。有没有办法这样做。
嗯，好的。我修改了 Codesanbox。看一看。我也会修改我的答案