有条件地呈现2个Formik组件不会更改初始值

npm install formik

import { Formik, Field, ErrorMessage } from 'formik';

function MyFormComponent() {
  return (
    <div>
      <Formik
        initialValues={{ name: '', email: '' }}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        <form>
          <div>
            <label htmlFor="name">Name:</label>
            <Field type="text" id="name" name="name" />
            <ErrorMessage name="name" component="div" />
          </div>
          <div>
            <label htmlFor="email">Email:</label>
            <Field type="email" id="email" name="email" />
            <ErrorMessage name="email" component="div" />
          </div>
          <button type="submit">Submit</button>
        </form>
      </Formik>

      <Formik
        initialValues={{ username: '', password: '' }}
        onSubmit={(values) => {
          console.log(values);
        }}
      >
        <form>
          <div>
            <label htmlFor="username">Username:</label>
            <Field type="text" id="username" name="username" />
            <ErrorMessage name="username" component="div" />
          </div>
          <div>
            <label htmlFor="password">Password:</label>
            <Field type="password" id="password" name="password" />
            <ErrorMessage name="password" component="div" />
          </div>
          <button type="submit">Submit</button>
        </form>
      </Formik>
    </div>
  );
}