UseState第2次使用较旧的值更新了挂钩

时间:2020-10-03 11:55:42

标签: reactjs react-hooks use-state

我正在尝试更新挂钩,但是第二次点击时它会使用较旧的值更新,有人可以告诉我我要去哪里错了。

import { useFormik } from "formik";

const validateEmployee = (empData) => {
  const errors = {};
  if (!empData.EmailId) {
    errors.EmailId = "Please Enter Email ID";
  } else if (
    !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(empData.EmailId)
  ) {
    errors.EmailId = "Invalid email address";
  }
  return errors;
};

const ForgotPassowrd = () => {
  const [FormObject, setFormObject] = useState({});
  const formik = useFormik({
    initialValues: {
      EmailId: "",
    },
    validate: validateEmployee,
    onSubmit: (values) => {
      setFormObject(formik.values);
      alert(JSON.stringify(values));
      console.log(FormObject);
    },
  });

  return (
    <div>
      <h2>New Employee Form...</h2>

      <form onSubmit={formik.handleSubmit}>
        <p>
          <label htmlFor="EmailId">Employee Email ID : </label>
          <input
            type="text"
            name="EmailId"
            value={formik.values.EmailId}
            onChange={formik.handleChange}
            onBlur={formik.handleBlur}
          ></input>
          {formik.touched.EmailId && formik.errors.EmailId ? (
            <span style={{ color: "red" }}>{formik.errors.EmailId}</span>
          ) : null}
        </p>
        <button type="submit">Create</button>
      </form>
    </div>
  );
};

为什么挂钩会第二次更新。

0 个答案:

没有答案