Formik绑定IonSelect多选组件值不更新并抛出类型迭代错误

undefined is not iterable 报错的本质是Ionic组件与Formik的适配断层，核心触发点有两个：

• Ionic的<IonSelect>是基于Web Component实现的受控组件，不会像原生HTML的<select>那样通过name属性自动关联Formik的字段状态。如果没有把Formik维护的当前选中值显式绑定到<IonSelect>的value属性上，组件在内部执行数组取值逻辑时会读到undefined，直接触发迭代报错。
• Formik原生的handleChange是针对原生HTML表单元素设计的，只能识别原生select事件里e.target.value格式的返回值。但<IonSelect multiple>触发的变更事件，实际选中值存在e.detail.value字段上，直接把handleChange绑到组件的变更事件上，Formik根本读不到正确的选中值，反而拿到undefined，在内部执行数组迭代逻辑时就会抛出对应错误栈。

按照下面的步骤调整即可：

• 从Formik的渲染上下文（或者useFormik hook）中取出values、setFieldValue、handleBlur、touched、errors这些状态和方法
• 给<IonSelect> 显式绑定value={values.salesCategories}，把Formik维护的多选数组值同步给组件
• 移除原生handleChange的绑定，换成适配IonSelect事件结构的自定义回调：从事件对象中取出正确的选中值，通过setFieldValue更新Formik的状态
• 给每个<IonSelectOption> 显式传入value属性，保证选项值和选中匹配逻辑正常运行

调整后的核心代码：

<IonCol size="12" className="ion-no-padding">
  <div className="p-sm">
    <IonItem className="form-label ion-no-padding">
      <IonLabel
        position="floating"
        className="fw-light color-light"
      >
        Select Sales Category
      </IonLabel>
      <IonSelect
        multiple
        name="salesCategories"
        // 同步Formik维护的当前选中值到组件
        value={values.salesCategories}
        // 适配IonSelect的事件结构更新字段值
        onIonChange={(e) => {
          setFieldValue('salesCategories', e.detail.value);
        }}
        onBlur={handleBlur}
      >
        {categories.map((cat, idx) => (
          <IonSelectOption key={idx} value={cat}>
            {cat}
          </IonSelectOption>
        ))}
      </IonSelect>
    </IonItem>
    {errors.salesCategories && touched.salesCategories && (
      <span className="error-text">
        {errors.salesCategories}
      </span>
    )}
  </div>
</IonCol>

• 配置的初始值salesCategories: []是完全符合多选场景的，不需要改动
• 所有Ionic的表单组件（IonInput、IonSelect、IonCheckbox等）和Formik适配时，都不要直接用原生handleChange，Web Component的事件结构和原生DOM存在差异，统一用setFieldValue做值更新是最稳定的方案

内容的提问来源于stack exchange，提问作者AbdulAzeez Olanrewaju