Formik 不会将值更新为 IonSelect 标签

Question

我有一个包含一些类别字符串的数组，我想使用 formik 根据 selectedCategory 更新数组字段。以下是我所做的。

categories.ts

const categories: string[] = [
  "Gadgets / Electronics",
  "Home accessories",
  "Phones & Tablets",
  "Computing",
  "Office Accessories",
  "Sporting Goods",
  "Automobile",
  "Stationarities",
  "Farming",
  "Books",
  "Technologies",
  "Medicine",
  "Architecture ",
  "Oil & Gas",
  "Discoveries",
  "Real Estate / Housing",
  "Wears (Footwears)",
  "Textile Industry",
  "Paint Industry",
  "Furniture",
  "Apps/Software ",
];

export default categories;

SignUp.tsx

import categories from "../../data/categories";

我将initialValues 设置为

 salesCategories: [],

....
 <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"
                              onChange={handleChange}
                              onBlur={handleBlur}
                            >
                              {categories.map((cat, idx) => (
                                <IonSelectOption key={idx}>
                                  {cat}
                                </IonSelectOption>
                              ))}
                            </IonSelect>
                          </IonItem>
                          {errors.salesCategories && touched.salesCategories && (
                            <span className="error-text">
                              {errors.salesCategories}
                            </span>
                          )}
                        </div>
                      </IonCol>

每次我尝试选择一个项目时，我都会在下面收到此错误，它是多选字段。我不明白 Formik 无法更新值的原因。

Uncaught TypeError: undefined is not iterable (cannot read property Symbol(Symbol.iterator))
    at Function.from (<anonymous>)
    at getSelectedValues (Formik.tsx:1133)
    at Formik.tsx:635
    at Formik.tsx:655
    at HTMLElement.<anonymous> (Formik.tsx:1202)
    at HTMLElement.handler (attachProps.ts:105)
    at emitEvent (index-3ccd7557.js:1)
    at Object.emit (index-3ccd7557.js:1)
    at e.valueChanged (ion-select_3.entry.js:1)
    at index-3ccd7557.js:1
    at Array.map (<anonymous>)
    at setValue (index-3ccd7557.js:1)
    at HTMLElement.set [as value] (index-3ccd7557.js:1)
    at attachProps.ts:35
    at Array.forEach (<anonymous>)
    at attachProps (attachProps.ts:12)
    at ReactComponent.componentDidUpdate (createComponent.tsx:50)
    at commitLifeCycles (react-dom.development.js:20684)
    at commitLayoutEffects (react-dom.development.js:23426)
    at HTMLUnknownElement.callCallback (react-dom.development.js:3945)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:3994)
    at invokeGuardedCallback (react-dom.development.js:4056)
    at commitRootImpl (react-dom.development.js:23151)
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at commitRoot (react-dom.development.js:22990)
    at performSyncWorkOnRoot (react-dom.development.js:22329)
    at react-dom.development.js:11327
    at unstable_runWithPriority (scheduler.development.js:646)
    at runWithPriority$1 (react-dom.development.js:11276)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11322)
    at flushSyncCallbackQueue (react-dom.development.js:11309)
    at scheduleUpdateOnFiber (react-dom.development.js:21893)
    at dispatchAction (react-dom.development.js:16139)
    at Formik.tsx:662
    at Formik.tsx:1202
    at Formik.tsx:693
    at Formik.tsx:703
    at HTMLElement.<anonymous> (Formik.tsx:1202)
    at HTMLElement.handler (attachProps.ts:105)
    at emitEvent (index-3ccd7557.js:1)
    at Object.emit (index-3ccd7557.js:1)
    at HTMLButtonElement.onBlur (ion-select_3.entry.js:1)

Formik 没有得到值。

Answer 1

你需要让 formik 处理事件

<Formik
  initialValues={{
    color: null
  }}
  validationSchema={validationSchema}
  onSubmit={values => {
    alert(JSON.stringify(values, null, 2));
  }}
>
  {formikProps => (
    <IonContent>
      <form onSubmit={formikProps.handleSubmit}>
        <IonItem>
          <IonLabel>Select Color</IonLabel>
          <IonSelect
            name="color"
            value={formikProps.values.color}
            onIonChange={formikProps.handleChange}
          >
            <IonSelectOption value="brown">Brown</IonSelectOption>
            <IonSelectOption value="blonde">Blonde</IonSelectOption>
            <IonSelectOption value="black">Black</IonSelectOption>
            <IonSelectOption value="red">Red</IonSelectOption>
          </IonSelect>
        </IonItem>
        <p className="error">
          {formikProps.touched.color && formikProps.errors.color}
        </p>
        <IonButton type="submit">SAVE</IonButton>
      </form>

    </IonContent>
  )}
</Formik>

• 在此处观看视频 - https://www.youtube.com/watch?v=ChttRF2p3Bc
• 完整的源代码在这里 - https://stackblitz.com/edit/ionic-react-forms-formik

Answer 2

只需使用formik goodies setFieldValue 之一

 <IonSelect
   multiple
   name="salesCategories"
   onIonChange={(e: any) =>
   setFieldValue("salesCategories", e.target.value)
   }
   onIonBlur={handleBlur}
    onBlur={handleBlur}
 >