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

Question

[Denis Izmailov]

есть такой код:

const [checked, setChecked] = useState(false);

const handleClearField = () => {
        if (checked) {
            console.log('1');
        } else {
            console.log('2');
        }
    };

return (
<>
    <FormControlLabel
       control={
          <Checkbox
              checked={checked}
              onChange={(_, checked) => {
                    setChecked(checked);
                    handleClearField();
              }}
           />
       }
        label="Тест"
     />
</>
);

Когда ставлю true в useState, выводит console.log('2');
И checked равняется false, а должен true

Answer 1

[Алексей Уколов]

onChange={(_, checked) => {}}
С чего вы взяли, что функция в onChange принимает второй аргумент?

setChecked(checked);
Это асинхронное действие, оно не блокирует поток исполнения до тех пор, пока значение в state изменится.

handleClearField();
Следовательно, при вызове этой функции вы работаете ещё с текущим значением, а не с новым.

Один из возможных вариантов решения:

const [checked, setChecked] = useState(false);

const handleClearField = (checked) => {
    setChecked(checked);

    if (checked) {
        console.log('1');
    } else {
        console.log('2');
    }
};

return (
  <>
    <FormControlLabel
       control={
          <Checkbox
              checked={checked}
              onChange={(event) => handleClearField(event.target.checked)}
           />
       }
        label="Тест"
     />
  </>
);

Comments

[Denis Izmailov]

Да это и я понимаю, не понимаю как это можно исправить или по другому реализовать

[Алексей Уколов]

Да это и я понимаю

Зачем тогда вы в заголовке вопроса написали, что не понимаете? ¯\_(ツ)_/¯

как это можно исправить или по другому реализовать

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

[szQocks]

Denis Izmailov, проблема решена или подсказать чёт ? можешь показать фулл код и описать проблему, попробую подсказать как лучше сделать