reactjs - Formik 不会将值更新为 IonSelect 标签

Question

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

类别.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;

注册.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 没有获得价值。

标签： reactjsionic-frameworkformikionic5

Answer 1

只需使用其中一种formik好东西setFieldValue

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