Javascript 触发模式确认时Formik丢失字段

我有一个使用

Formik

库的表单，一切正常，但当我想确认和提交时，我需要先通过一个模式，问题是当我启动确认模式时，我在表单中输入的所有数据都被删除，没有发送任何内容，我注意到当我启动模式时，表单标签被上传，然后丢失了数据，有人也有同样的问题吗？o当更改模式的状态时，是否有措施防止表单标记上载

这是我代码的一部分，我在模式上使用

cstranslation

，装载和卸载组件，我使用

FieldArray

<Formik
  enableReinitialize
  initialValues={INITIAL_VALUES}
  onSubmit={(values) => {
    this.props.onSubmitForm(values.rows);
  }}
>
  {({ values, errors, touched, isValid }) => (
    <Form>
      <Title />
      <div className="wrapper__brick wrapper__brick--to-up">
        <FieldArray
          name="rows"
          render={({ push }) => (
            <>
              <div className="wrapper__block">
                <div className="master-table">
                  <FieldArray
                    name="rows"
                    render={({ remove }) => (
                      <div className="master-table__container">
                        {values.rows.length > 0 &&
                          values.rows.map((rows, index) => (
                            <div
                              className="master-table__row"
                              key={index}
                            >
                              <div className="master-table__item">
                                <Field
                                  className={errors.rows && errors.rows[index] && touched.rows && touched.rows[index] ?
                                    'input input--empty is-danger'
                                    :
                                    'input input--empty'
                                  }
                                  name={`rows.${index}.name`}
                                  placeholder="Name"
                                  type="text"
                                  validate={validateName}
                                />
                                <ErrorMessage
                                  name={`rows.${index}.name`}
                                  component="p"
                                  className="help is-danger"
                                />
                              </div>
                              <div className="master-table__item">
                                <div className={rows.default ? 'select select--disabled' : 'select select--empty'}>
                                  <Field
                                    as="select"
                                    disabled={rows.default}
                                    name={`rows.${index}.kind`}
                                  >
                                    {this.allowedKinds.map((row) => (
                                      <option
                                        value={row.internal}
                                        key={row.internal}
                                      >
                                        {row.name}
                                      </option>
                                    ))}
                                  </Field>
                                </div>
                              </div>
                              <div className="master-table__item">
                                <button
                                  className="button button--trigger tooltip is-tooltip-right"
                                  data-tooltip={rows.default ? t('common.deleteNotAvailable') : t('common.delete')}
                                  onClick={() => remove(index)}
                                  type="button"
                                  disabled={rows.default}
                                >
                                  <span className="icon">
                                    <i className="far fa-trash-alt" />
                                  </span>
                                </button>
                              </div>
                            </div>
                          ))}
                      </div>
                    )}
                  />
                </div>
              </div>
              <Footer
                onAddRow={() => push({
                  id: UUID.v4(),
                  name: '',
                  kind: 'string',
                  type: 'generic',
                  required: false,
                  default: false
                })}
                validForm={!isValid}
              />
              <TransitionWrapper stateToggle={this.state.openModal}>
                <ModalDialog
                  iconModal="fas fa-info-circle"
                  titleText={t('modals.descriptionContinue')}
                  onCloseMethod={this.handleShowModal}
                  onAcceptMethod={this.props.onSubmitForm}
                />
              </TransitionWrapper>
            </>
          )}
        />
      </div>
    </Form>
  )}
</Formik>

{
this.props.onSubmitForm（values.rows）；
}}
>
{（{值，错误，触摸，isValid}）=>(
(
(
{values.rows.length>0&&
values.rows.map（（行，索引）=>(
{this.allowedKinds.map（（行）=>(
{row.name}
))}
删除（索引）}
type=“按钮”
已禁用={rows.default}
>
))}
)}
/>
推({
id:UUID.v4（），
名称：“”，
种类：'字符串'，
类型：“泛型”，
必填项：false，
默认值：false
})}
validForm={！isValid}
/>
)}
/>
)}