Как переключить значение флажка в React Hooks?

Question

У меня есть тип ввода checkbox следующим образом:

const [is_checked,set_is_checked]= useState(false);

const toggle_payment = () => {
    set_is_checked(!is_checked);
    console.log(is_checked);
}


return(
    <div>
        <input checked={is_checked}  onChange={toggle_value} type="checkbox"/>
    </div>
)

Проблема

Кажется, это работает нормально, но когда я console.log(is_checked) это похоже, он печатает предыдущее значение. Я пробовал оба onChange и onClick, но получил тот же результат. Что меня смущает, так это то, что checkbox проверяется / снимается каждый раз, когда я нажимаю на поле, но console.log печатает значение, отличное от ожидаемого, например, когда я отмечаю флажок щелчком мыши, окно получило проверено но console.log печатает false

Answer 1

обновление состояния с использованием средства обновления, предоставляемого ловушкой useState, является асинхронным и не будет немедленно отражать и обновлять, но вызовет повторную визуализацию

Я думаю, что если вы console.log () вне функции, которую вы может увидеть изменения is_checked

Answer 2

Это связано с тем, как в React работает управление состоянием. Вызов функции установки состояния (в данном случае set_is_checked) обновит значение, но это обновленное значение будет доступно на следующем рендере . Когда вы звоните console.log ниже set_is_checked, вы все еще ссылаетесь на старое значение до того, как устанавливается состояние.