单击提交按钮后，如何将表单的状态设置为用户输入？

Question

我对 Formik 还很陌生，不明白为什么我不能将状态 (formValues) 设置为由用户输入组成的值对象。当我记录“values”时，我会看到对象及其属性，但是当我尝试将FormValues设置为值时，“formValues”的值仍然为null。我在这里错过了什么？

import React, { useState } from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";

const SignupForm = (props) => {
  const [formValues, setFormValues] = useState(null);

  const initialValues = {
    firstname: "",
    lastname: "",
    email: ""
  };

  const validationSchema = Yup.object({
    firstname: Yup.string()
      .max(20, "20 characters or less")
      .required("Required")
  });

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


  return (
    <Formik
      initialValues={formValues || initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
      enableReinitialize
    >
      <Form name="address" id="address-id" className="form">
        <h4>Sign Up</h4>

        <div className="firstName-div">
          <label htmlFor="firstname">First Name</label>
          <Field
            name="firstname"
            className="form"
            type="text"
            placeholder="First Name"
          />
          <ErrorMessage name="firstname" component="div" className="error" />
        </div>
        <div className="lastName-div">
          <label htmlFor="lastname">Last Name</label>
          <Field
            name="lastname"
            className="form"
            type="text"
            placeholder="Last Name"
          />
        </div>
        <div className="email-div">
          <label htmlFor="email">E-Mail</label>
          <Field
            name="email"
            className="form"
            type="text"
            placeholder="E-Mail"
          />

          <button type="submit">Submit</button>
        </div>
      </Form>
    </Formik>
  );
};

我还读到应该可以使用 useRef() 钩子将数据（用户输入）加载到另一个对象中，但似乎再次无法访问 Formik 组件之外的值（无法读取属性“值”的空值？在“formRef.current.values.firstName”）？任何想法为什么这种方法不起作用以及我如何在单击提交按钮后加载保存的数据？

import React, { useState, useRef } from "react";
import { Formik, Field, Form, ErrorMessage } from "formik";
import * as Yup from "yup";
import "./styles.css";

const SignupForm = () => {
  const [formValues, setFormValues] = useState(null);
  **const formRef = useRef(null)**

  const initialValues = {
    firstname: "",
    lastname: "",
    email: ""
  };


  const validationSchema = Yup.object({
    firstname: Yup.string()
      .max(20, "20 characters or less")
      .required("Required")
  });

  
  **const savedValues = {
    firstName: formRef.current.values.firstName || '',
    lastName: formRef.current.values.lastName || '',
    email: formRef.current.values.email || ''
  }**
  
  const onSubmit = (values) => {
    setFormValues(savedValues);
  };
  return (
    <Formik
      initialValues={formValues || initialValues}
      validationSchema={validationSchema}
      onSubmit={onSubmit}
      enableReinitialize
      **innerRef={formRef}**
    >
      <Form name="address" id="address-id" className="form">
        <h4>Sign Up</h4>

        <div className="firstName-div">
          <label htmlFor="firstname">First Name</label>
          <Field
            name="firstname"
            className="form"
            type="text"
            placeholder="First Name"
          />
          <ErrorMessage name="firstname" component="div" className="error" />
        </div>
        <div className="lastName-div">
          <label htmlFor="lastname">Last Name</label>
          <Field
            name="lastname"
            className="form"
            type="text"
            placeholder="Last Name"
          />
        </div>
        <div className="email-div">
          <label htmlFor="email">E-Mail</label>
          <Field
            name="email"
            className="form"
            type="text"
            placeholder="E-Mail"
          />

          <button type="submit">Submit</button>
        </div>
      </Form>
    </Formik>
  );
};

export default SignupForm;