Реагирует Formik arrayHelpers.pu sh, -remove, -insert не работает с массивом объектов - PullRequest
Новая
       6

Реагирует Formik arrayHelpers.pu sh, -remove, -insert не работает с массивом объектов

0 голосов
/ 04 апреля 2020

Мои объекты выглядят так: 

  let genItems: any = [
           {
            label: "customer_number",
            bounding_box: [380, 817, 449, 835],
            value: ["26700"]
          },
          {
            label: "invoice_amount",
            bounding_box: [1320, 1438, 1416, 1459],
            value: ["737,79 \u20ac"]
          },
          {
            label: "invoice_date",
            bounding_box: [380, 788, 505, 806],
            value: ["03.08.2019"]
          },
          {
            label: "invoice_number",
            bounding_box: [385, 1096, 547, 1117],
            value: ["2019266021"]
          },
          {
            label: "sales_tax_amount",
            bounding_box: [1323, 1400, 1416, 1421],
            value: ["117,80 \u20ac"]
          }
  ]


....
          <h1 className={classes.sectionHead}>Editing General</h1>

            <Formik
              initialValues={{ genItems }}
              onSubmit={(values, actions) => {
                // changeCurrent(values)
                sectionUpdater(values, "general")
                actions.setSubmitting(false)
                setEditingGeneral(false)
              }}
              render={({ values }) => (
                <Form autoComplete="off">
                  <FieldArray
                    name="value"
                    render={(arrayHelpers) => (
                      <div>
                        {values.genItems && values.genItems.length > 0 ? (
                          values.genItems.map((item: any, iIdex: number) => (
                            <div key={item.value} className={classes.inputRow}>
                              <div>{genItems[iIdex].label}</div>

                              {item.value.map((iVal: any, iVlIdx: number) => (
                                <Field
                                  name={`genItems.[${iIdex}].value.[${iVlIdx}]`}
                                />
                              ))}

                              <button
                                className={classes.deleteButton}
                                type="button"
                                onClick={() => arrayHelpers.remove(iIdex)} // remove a friend from the list
                              >
                                ✕
                              </button>
                            </div>
                          ))
                        ) : (
                          <button
                            type="button"
                            //add fried fn here 
                          >
                            Add a friend
                          </button>
                        )}
                        <button
                          type="button"
                          onClick={() => arrayHelpers.push({ label: "new label", value: ["new dalue"] }} 
                        >
                          +
                        </button>
                        <div className={classes.saveChangesButton}>
                          <button type="submit">Save</button>
                        </div>
                      </div>
                    )}
                  />
                </Form>
              )}
            />

Я пробовал много вариантов. Например, используя handlepu sh или запись ...push(genItems[iIdex]) et c. Аутсорсинг функциональности отдельной функции сработал, но выдвинул объект только после сохранения формы. Я также пытался указать случайное число, например 2, в качестве индекса, например ...push(2)

Помимо наличия этой базовой функции c добавления элемента в массив форм, я хочу вставить два элемента поля в добавить новый объект в массив. Один для метки и один для значения.

...