如何使用带有 Formik 的 Switch 组件 (material-ui) 修复可选字段的验证

Question

我正在尝试修复表单中的错误。该表单是使用 Formik 和一个名为 GenericForm 的自定义反应组件构建的，它基本上处理验证并将对象数组映射到表单子组件呈现。

const advancedFields = [
        {
            label: "Power Factor",
            id: "powerFactor",
            type: "number",
            value: "",
            isRequired: useAdvancedOptions,
        },
        {
            label: "Efficiency",
            id: "efficiency",
            type: "number",
            value: "",
            isRequired: useAdvancedOptions,
        },
    ];

变量 useAdvancedOptions 是组件状态的一部分，使用新的 React 挂钩和 Switch 组件更新。

<FormControlLabel control={ <Switch onChange={
         () => setUseAdvancedOptions(!useAdvancedOptions)
}color={"primary"}/>}label="Advanced Options"/>

所以这个错误...当我用开关打开和关闭 advancedOptions 时，如果该字段已被触摸，如果两个高级字段内没有值，提交按钮将不会验证，即使字段已从表单中排除。

当我使用 Chrome 调试器并检查字段对象中的变量 useAdvancedOptions 时，似乎 isRequired 的布尔值正在按预期更新，所以我不确定为什么按钮仍在尝试需要字段。

Answer 1

验证被破坏，当它读取 formic 中存在的值之一并对其进行过滤时，采用已删除的高级选项值的迭代会将 null 带入 switch case 并失败。如果迭代过滤器结果为空，我在 switch 语句之前写了一个条件 return。

如何使用带有 Formik 的 Switch 组件 (material-ui) 修复可选字段的验证

How to fix validation of optional fields using Switch component (material-ui) with Formik

material-ui

formik

react-hooks