javascript - 使用 Yup 驗證包含物件陣列的 formik 欄位

範例程式碼：https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx

我正在嘗試建立一個表單，該表單將接受一個包含特定類型 Criterion 物件的 Criteria 陣列：

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

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

因此，Configuration 物件可以有多個 Criterion 用來定義網路 API 查詢。我已經做到這個程度，但雖然 yup 正確驗證了陣列，當它到達 formik 時，似乎又把它當作字串來處理，即使類型已經被（我 認為）正確定義。

這裡是一個我看到的範例，如果你使用像這樣的陣列作為 criteria 值提交表單：

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

formik 的值顯示為：

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

有沒有辦法讓 formik 將這個視為 JavaScript 物件陣列，而不是字串？

答案＃1

您必須先將 criteria 的值解析為 JSON（因為它是來自文字區的字串，而不是物件），然後像這樣重新賦值：

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

範例：https://codesandbox.io/s/zealous-northcutt-f0d8k?file=/src/App.tsx