Задать вопрос
@F1eX
React Dev

Почему стейт чекбокса обновляется таким образом?

Есть такой код:
const rejectedCodes = {unverifiable: {status: false, code: 3}, ...}
const [rejectedStatuses, setRejectedStatuses] = useState(rejectedCodes);

<Checkbox
   checked={rejectedStatuses.unverifiable.status}
   onChange={(e) => {
        setRejectedStatuses({
             ...rejectedStatuses,
             unverifiable: { ...rejectedStatuses.unverifiable, status: e.target.checked }
       })
       console.log(rejectedStatuses);
   }}
>
Unverifiable
</Checkbox>


При клику на этот чекбокс стейт меняется как надо, но само состояние чекбокса противоположно ему - т.е. при status: true свойство чекбокса checked равно false и наоборот.
Попытка костылить инверсией стейта, естественно, делает чекбокс некликабельным.
  • Вопрос задан
  • 89 просмотров
Подписаться 1 Средний Комментировать
Помогут разобраться в теме Все курсы
  • Яндекс Практикум
    Мидл фронтенд-разработчик
    5 месяцев
    Далее
  • Яндекс Практикум
    React-разработчик
    3 месяца
    Далее
  • Яндекс Практикум
    Фронтенд-разработчик
    10 месяцев
    Далее
Решения вопроса 1
@dimoff66
Кратко о себе: Я есть
Потому что rejectedStatuses содержит состояние на момент последнего рендеринга. Оно не может измениться от вызова setRejectedStatuses ну хотя бы потому что это константа. А вы проверяете его значение немедленно после вызова функции установки, словно константа раз и поменяется. Оно поменяется при следующем вызове функции компонента, то есть после рендеринга, вызванного сменой состояния.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы
ITK academy Нижний Новгород
от 80 000 до 120 000 ₽
ITK academy Воронеж
от 50 000 до 90 000 ₽