Как исправить проверку необязательных полей с помощью компонента Switch (material-ui) с Formik

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 является частью состояния компонента, обновляется с помощью нового обработчика реакции и компонента Switch.

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

Итак, ошибка ... когда я включаю и выключаю advancedOptions с помощью переключателя, если поле было затронуто, кнопка отправки не будет проверяться, если в двух дополнительных полях нет значений, даже если поля имеют были исключены из формы.

Когда я использую отладчик Chrome и проверяю переменную useAdvancedOptions внутри объектов поля, кажется, что логические значения для isRequired обновляются, как и ожидалось, поэтому я не уверен, почему кнопка все еще пытается запросить поле.

Answer 1

Проверка была прервана, когда она считала одно из значений, существовавших в формальной форме, и отфильтровала его, итерация, которая принимала удаленное значение расширенного параметра, приняла бы значение null в случае переключения и потерпела неудачу. Я написал условие для возврата перед оператором switch, если итерационный фильтр привел к нулю.