问：

好的，所以我正在使用 Formik 构建一个 Ionic React 应用程序。我遇到了这个问题，无法处理 Formik 设置的状态值。我最终陷入了以下两种情况之一：IonRadioGroup

版本

  ...
  "@ionic/react": "^6.0.0",
  "react": "^18.2.0",
  "formik": "^2.2.9",
  ...

有价值道具

或者，我可以使用 prop 上的 prop 设置默认值，并将其默认为静态或数据库值。但在这种情况下，我无法使用该函数更改该值。valueIonRadioGrouponIonChange

// Unable to change the value in Formik state, but able to default the value because of 'value' prop
<IonItemGroup>
  <IonItemDivider>Type</IonItemDivider>
  <IonRadioGroup
    name="type"
    value={formik.values.type}
    onIonChange={(e) => formik.setFieldValue("type", e.detail.value)}
  >
    <IonItem>
      <IonLabel>Percentage</IonLabel>
      <IonRadio slot="end" value="percentage" />
    </IonItem>
    <IonItem>
      <IonLabel>Fixed</IonLabel>
      <IonRadio slot="end" value="fixed" />
    </IonItem>
  </IonRadioGroup>
</IonItemGroup>

没有价值道具

或者我可以省略道具，因此没有默认值，但能够在 Formiks 状态下更改值。value

// Able to change the value in Formik state, but no default because of missing 'value' prop
<IonItemGroup>
  <IonItemDivider>Type</IonItemDivider>
  <IonRadioGroup
    name="type"
    onIonChange={(e) => formik.setFieldValue("type", e.detail.value)}
  >
    <IonItem>
      <IonLabel>Percentage</IonLabel>
      <IonRadio slot="end" value="percentage" />
    </IonItem>
    <IonItem>
      <IonLabel>Fixed</IonLabel>
      <IonRadio slot="end" value="fixed" />
    </IonItem>
  </IonRadioGroup>
</IonItemGroup>

我认为可能会出现此问题，因为当您使用 Formik 并在 onIonChange 事件处理程序中更新 IonRadioGroup 的值属性时，Formik 会触发组件的重新渲染，并且 IonRadioGroup 使用新值重新初始化，导致 onIonChange 事件被触发两次。

旁注

formik.handleChange在这里似乎不起作用。因为我想变化事件是相当奇特的。因此，求助于 .formik.setFieldValue

问题

我在这里遗漏了什么吗？我愿意接受建议。