反应Formik arrayHelpers.push，-删除，-插入不适用于对象数组

Question

我的对象如下：

  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>
              )}
            />

我尝试了许多变体。例如，使用handlepush或编写...push(genItems[iIdex])等。将功能外包给单独的功能确实可以，但是仅在保存表单后才推送对象。我还尝试指定像2这样的随机数作为像...push(2)

这样的索引

除了具有向表单数组添加项目的基本功能外，我还想插入两个Field元素以向数组添加新对象。一种用于标签，另一种用于值。