React事件处理函数内state未更新、setState不生效问题咨询

最常见的触发原因是按钮默认提交行为被触发，打断了React状态更新流程：

• 如果你的按钮被包裹在<form>标签内，浏览器默认给按钮的type属性赋值为submit，点击后会触发表单提交逻辑，浏览器会执行页面刷新/跳转操作，React的状态更新逻辑还没执行完成就被打断。Safari对表单提交和前端框架状态更新的执行顺序和Chrome、Firefox等浏览器存在差异，因此才会出现仅Safari运行正常的现象。
• 其次还有两种可能的诱因：
  1. 上层组件使用React.memo、shouldComponentUpdate或者useMemo包裹了当前组件，且依赖项/相等判断逻辑配置错误，导致shown状态变化后没有触发组件重渲染。
  2. 你省略的其他业务代码中存在同步逻辑，在setShown(false)执行后立刻把shown改回了true，React批量更新后最终状态还是true。

另外你观察到的事件处理函数内两次console.log(shown)都输出true是正常现象：React的state在单次渲染周期内是固定快照，同一个函数作用域里的shown值不会因为调用setShown就立刻改变，需要等下次重渲染才能拿到更新后的值。

1. 优先排查按钮外层是否存在<form>标签，给按钮显式添加type="button"属性，阻止默认提交行为即可解决90%以上的同类问题：

const [shown, setShown] = useState(true)

return (
  shown ? (
    <button
      type="button"
      onClick={() => {
        setShown(false)
      }}
    ></button>
  ) : (
    <OtherElement />
  )
)

2. 如果是上层组件更新拦截导致的问题，检查React.memo的相等判断逻辑，或者当前组件的依赖项配置，确保shown状态变化能触发组件重渲染。
3. 如果存在其他逻辑覆盖状态的情况，可以使用函数式更新保证状态更新的正确性：

setShown(prev => false)

你当前使用的setTimeout方案属于临时hack，本质是把状态更新放到下一个宏任务执行，躲开了当前事件周期里的浏览器默认行为/批量更新逻辑，没有解决根因，还会带来不必要的异步延迟，不推荐长期使用。

内容的提问来源于stack exchange，提问作者thurasw