Question

我正在尝试修复表单中的错误。该表单是使用Formik和自定义的react组件GenericForm构建的，该组件基本上处理验证并将对象数组映射到form子组件渲染中。

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

变量useAdvancedOptions是组件状态的一部分，并使用新的react hook和Switch组件进行了更新。

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

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

当我使用Chrome调试器并检查字段对象内的变量useAdvancedOptions时，似乎isRequired的布尔值正在按预期方式更新，因此我不确定为什么按钮仍然尝试要求该字段。

>

Answer 1

验证被破坏了，当它读取甲酸中存在的值之一并对其进行过滤时，采用已删除的高级选项值的迭代将null置于切换条件下并失败。如果迭代过滤器结果为空，我在switch语句前写了一个条件返回。

如何通过Formik使用Switch组件（material-ui）修复对可选字段的验证

1 个答案: