javascript - 值(value)观问题 Formik

Question

GitHub discussion about this issue - https://github.com/jaredpalmer/formik/issues/529

我将 formik 值传递给在 <Field/> 中调用的函数的 onChange 但是当我输入 <Field/> , 最后一个字符不属于函数。

代码沙箱 - link

截图:

最小代码实例:

import React from "react";
import ReactDOM from "react-dom";
import { Formik, Form, Field, FieldArray } from "formik";

function App() {
  //------ HERE ----------
  const getValues = values => console.log(values.fields[0]);
  //----------------------
  return (
    <>
      <Formik
        initialValues={{ fields: [""] }}
        onSubmit={(values, actions) => {
          actions.setSubmitting(false);
          console.log(values);
          return false;
        }}
        render={({ setFieldValue, values }) => (
          <Form>
            <FieldArray
              name="fields"
              render={() => (
                <Field
                  type="text"
                  name="fields.0"
                  placeholder="Write something"
                  onChange={e => {
                    setFieldValue("fields.0", e.target.value);
                    //---------------
                    getValues(values);
                    //---------------
                  }}
                />
              )}
            />
          </Form>
        )}
      />
    </>
  );
}

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

Answer 1

此答案基于 Formik v1.5.7

您正在尝试在调用 setFieldValue 后立即在代码中获取 values 的陈旧值，这在内部执行异步操作，因此您不能期望值在它之后立即更改(调用)返回。因此，当您尝试从 values 中记录值时，您会在当前(运行的)渲染周期中获得状态对象。

当 values 发生变化时，Formik 会重新呈现表单，其中它将具有您试图获得的所需值。

我在您的示例中向上移动了代码来解释这一点。

这是 updated code link .

由于这个问题是在我回答之后更新的，所以我会评论这个具体的 GitHub issue .问题出在增强开发请求中，注释中的解决方案在您的示例中不起作用，因为 values 仍将是“旧”值。

这就是为什么 async await 解决方案在这种情况下不起作用的原因:

onChange={async e => {
    await setFieldValue("fields.0", e.target.value);
    getValues(values);
}}

以上代码在名为 setFieldValue 的函数上单击事件 awaits 时执行，并在内部设置状态，这是放置在执行堆栈中的异步操作。调用返回并 console.log 记录 values 恰好是现有渲染周期 values。

希望澄清。