(React) Material-UI: компонент изменяет контролируемое проверенное состояние SwitchBase на неконтролируемое

Я использую хук useState и имею множество условий

const [conditions, setConditions] = useState([])

Каждый элемент в этом массиве содержит {условие: "какая-то строка", значение: логическое значение}

Я визуализирую свой массив следующим образом:

       <FormControl component = "fieldset">
            <FormGroup aria-label = "position" column className = {classes.form}>
              {conditions.map(({ condition, value }, index) => {
                return (
                  <FormControlLabel
                    key = {index}
                    value = "end"
                    control = {
                      <Checkbox
                        checked = {value}
                        onClick = {() => {
                          changeConditionValue(index, !conditions[index].value);
                        }}
                      />
                    }
                    label = {condition}
                    labelPlacement = "end"
                  />
                );
              })}
            </FormGroup>
          </FormControl>

Теперь я пытаюсь изменить значение условия по определенному индексу, если вы нажмете прикрепленную к нему галочку, и я настроил ее следующим образом:

 const changeConditionValue = (findIndex, newValue) => {
    const saveConditions = conditions;
    setConditions([]);
    saveConditions.map(({ condition, value }, index) => {
      if (index != findIndex) {
        setConditions((old) => [...old, { condition, value }]);
      } else {
        setConditions((old) => [...old, { condition, newValue }]);
      }
    });
  };

Сначала я сохраняю старые условия, потому что, если я продолжу использовать "... old", значения старого массива будут сохранены, и я не хочу этого, поэтому у меня есть свои saveConditions, где я сопоставляю, чтобы установить эти значения к моему новому набору условий. Все работает нормально, за исключением того, что я делаю это более одного раза. В первый раз значение возвращается обратно, но во второй раз оно возвращает undefined ?

This is the error: Material-UI: A component is changing the controlled checked state of SwitchBase to be uncontrolled.
Elements should not switch from uncontrolled to controlled (or vice versa).
Decide between using a controlled or uncontrolled SwitchBase element for the lifetime of the component.
The nature of the state is determined during the first render, it's considered controlled if the value is not `undefined`.
```

Нет, не совсем :/

Lucas Goldner 24.12.2020 15:49
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
2 167
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Неважно, я исправил это сам:

setConditions((old) => [...old, { condition, value: newValue }]);

не работает!

Другие вопросы по теме