Formik setFormValues 在 useEffect 中不起作用

Question

我有以下代码：

import React, { useEffect, useState } from "react";
import { Formik, Field } from "formik";
import MaskedInput from "react-text-mask";

const phoneNumberMask = [ "(", /[1-9]/, /\d/, /\d/, ")", " ", /\d/, /\d/, /\d/, "-", /\d/, /\d/, /\d/, /\d/ ];

export default () => {

  const [formValues, setFormValues] = useState(null);

  useEffect(() => {
    setTimeout(() => {
      setFormValues({ phone: '9178889999' });
    }, 1000)
  }, []);

  const onSubmit = (values) => {
    console.log(values);
  };

  return (
    <div className="app">
      <Formik
        initialValues={{ phone: '9134445555' }}
        onSubmit={onSubmit}
        enableReinitialize
      >
        {props => {
          const {
            handleChange,
            handleSubmit,
          } = props;
          return (
            <form onSubmit={handleSubmit}>
              <Field name="phone">
                {
                  ({ field }) => <MaskedInput
                    {...field}
                    type="text"
                    mask={phoneNumberMask}
                    placeholder="Enter your phone number"
                    onChange={handleChange}
                    className="text-input"
                  />
                }
              </Field>
              <button type="submit">
                Submit
              </button>
            </form>
          );
        }}
      </Formik>
    </div>
  );
};

其中 MaskedInput 最初填充值：9134445555 使用格式：(913) 444-5555.

我的问题是： 对 setFormValues(...) 的调用在内部不起作用：useEffect 在 1 s (1000 ms) 超时后。

我的目标

MaskedInput 填充第二个值：9178889999 在 1 s 之后。
MaskedInput 显示具有正确格式的第二个值：(917) 888-9999.

Answer 1

问题很简单，您没有将 formValues 连接到您的 initialValues。

这会导致另一个问题，您的面具没有正确更新：。

Answer 2

这是在上面的代码中实现这两个目标的最简单方法：

更改：initialValues={{ phone: '9134445555' }} 为：initialValues={ formValues || { phone: '9134445555' } }
关于 package.json 更改："react-text-mask": "^5.4.3" 到 "react-text-mask": "5.4.1"。

如果我们使用截至今天的最新版本：5.4.3 那么该模式将不会应用于值更改。此问题发生在版本：5.4.2。不过，版本 5.4.1 上不存在该问题。这就是我使用那个版本的原因。

顺便说一句，这个库似乎没有维护，因为：July 2018。

Formik setFormValues 在 useEffect 中不起作用

Formik setFormValues not working inside useEffect

maskedinput

npm

reactjs

formik

use-effect