Javascript 如何在React钩子中切换复选框值？

我有一个输入类型复选框，如下所示：

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>
)

问题

---

这似乎工作正常，但当I console.logis_选中时，它似乎打印了以前的值。我尝试了onChange和onClick，但得到了相同的结果。让我困惑的是，每次我单击复选框时，复选框都会被选中/取消选中，但console.log打印的值与预期打印的值不同，例如，当我用鼠标单击复选框时，复选框被选中，但console.log打印的值为false

这是由于状态管理在React中的工作方式造成的。在本例中，对状态设置器函数的调用set_is_checked将更新该值，但更新后的值在下一次渲染时可用。当您调用set_下的console.log时，如果选中，您仍然在引用设置状态之前的旧值。

使用useState钩子提供的更新程序进行的状态更新是异步的，不会立即反映和更新，但会触发重新渲染

---

我认为如果你在函数外使用console.log，你可能会看到is_checked的变化，你可以检查我创建的这个stackblitz：你会看到如果你在Toggle payment外使用console.log，值外的值是正确的，你也可以这样做，并将逻辑放入useffect中