我正在尝试修复表单中的错误。该表单是使用 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"/>
所以这个错误...当我使用开关打开和关闭高级选项时,如果已触摸该字段,则提交按钮将不会验证两个高级字段中是否没有值,即使这些字段已从表单中排除也是如此。
当我使用 Chrome 调试器并检查字段对象中的变量 useAdvancedOptions 时,isRequired 的布尔值似乎正在按预期更新,所以我不确定为什么按钮仍在尝试需要该字段。
验证被破坏,当它会读取 formic 中存在的值之一并过滤它时,采用已删除的高级选项值的迭代会将 null 带入开关情况并失败。我写了一个条件,如果迭代过滤器导致 null,则在 switch 语句之前返回。