javascript - Validácia poľa Formik obsahujúceho pole objektov pomocou Yup

Ukážkový kód: https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx

Snažím sa zostaviť formulár, ktorý bude prijímať pole Criteria objektov Criterion, ktoré sú určitého typu:

export interface Criterion {
  field: string,
  op: string,
  values: []
}

export interface Configuration {
  title: string,
  description: string,
  criteria: Criterion[],
}

Takže objekt Configuration môže mať viacero Criterion, ktoré sa používajú na definovanie dotazu webového API. Dostal som sa až sem, ale zatiaľ čo yup správne overuje pole, keď sa dostane k formiku, zdá sa, že ho opäť považuje za reťazec, aj keď sú typy (myslím) správne definované.

Tu je príklad toho, čo vidím, ak odošlete formulár použitím poľa ako hodnoty criteria:

[
  {
    "field": "createdOn",
    "op": "Equal",
    "values": [
      "2020-01-01"
    ]
  }
]

hodnota formiku zobrazuje:

 "criteria": "[\n    {\n      \"field\": \"createdOn\",\n      \"op\": \"Equal\",\n      \"values\": [\n        \"2020-01-01\"\n      ]\n    }\n  ]"

Existuje spôsob, ako prinútiť Formik, aby to považoval za pole javascriptových objektov namiesto reťazca?

Odpoveď č. 1

Najskôr musíte analyzovať hodnotu kritérií na JSON (pretože ide o reťazec z textového poľa, nie o objekt), potom ju znovu priradiť takto:

            let temp = { ...values };
            temp.criteria = JSON.parse(values.criteria);

Ukážka: https://codesandbox.io/s/zealous-northcutt-f0d8k?file=/src/App.tsx