javascript - 如何在 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 hook 提供的 updater 进行状态更新是异步的，不会立即反射(reflect)和更新，而是会触发重新渲染

我认为如果你在函数之外使用 console.log() 你可能会看到 is_checked 的变化