React中onClick事件内setState无法更新状态的问题排查

你的按钮嵌套在<form>标签内，HTML按钮默认类型为submit，点击时会触发表单的默认提交行为，导致页面刷新（组件重新初始化），setColEdit的状态更新被页面刷新覆盖，因此看起来setState未生效。

方案1：给按钮指定type="button" #

显式将按钮设为普通按钮，避免触发表单提交：

<button type="button" onClick={cancelEdit} className="bg-red-500 text-white p-1">
    <i className="pi pi-times"></i>
</button>

方案2：在事件处理中阻止默认行为 #

修改cancelEdit函数，通过事件对象阻止表单提交：

const cancelEdit = (e) => {
    e.preventDefault();
    setColEdit("");
}

调用时传递事件参数：

<button onClick={cancelEdit} className="bg-red-500 text-white p-1">
    <i className="pi pi-times"></i>
</button>

React的setState是异步更新，但此处核心问题并非异步，而是表单默认提交导致的页面刷新。方案1是更简洁的推荐做法，能从根源避免不必要的表单提交行为。

内容的提问来源于stack exchange，提问作者Anang Hariyanto N