使用 Yup 验证包含对象数组的 formik 字段

Question

示例代码：https://codesandbox.io/s/busy-bose-4qhoh?file=/src/App.tsx

我正在尝试构建一个表单，该表单将接受 Criteria 个特定类型的 Criterion 个对象数组：

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 对象数组而不是字符串？

Answer 1

你必须首先将 criteria 的值解析为 JSON（因为它是来自 textarea 的字符串，而不是对象），然后像这样重新分配它：

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

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

使用 Yup 验证包含对象数组的 formik 字段

Validating formik field containing array of objects using Yup

javascript

typescript

reactjs

yup

formik