React中直接修改Hook状态不调用set更新函数会有什么问题？

React的useState返回的状态遵循不可变原则，所有状态更新必须通过对应的set函数触发，直接修改状态会违反React的核心设计规则，会引发以下几类严重问题：

• 不会主动触发组件重渲染：React通过比对状态的引用变化判断是否需要更新界面，你直接修改对象的属性没有改变对象本身的引用，React感知不到状态发生了变化，界面不会同步更新。只有当其他操作触发组件重渲染时，你修改的内容才会意外显示，会出现大量界面和逻辑预期不符的诡异bug
• 状态更新容易被覆盖：你直接修改的是当前渲染闭包内的状态对象，后续如果调用set函数传入旧状态展开生成的新对象，之前直接修改的内容会被直接覆盖，出现数据丢失、逻辑异常的问题
• 破坏状态可调试性：React的状态更新默认可以通过DevTools追踪变化链路，直接修改状态不会留下更新日志，后期调试时无法定位异常状态的修改来源，维护成本大幅提升
• 并发渲染下数据错乱：React 18+ 默认开启并发渲染模式，更新任务可能被打断、优先级调整，直接修改可变状态会导致多个渲染任务读到不一致的状态，出现界面错乱、数据污染的问题，这类bug复现难度极高，排查成本极大

你代码中的问题属于同一次事件回调内多次更新同一个状态导致的覆盖问题：
你在switch分支内使用函数式更新调用了setFormData，但最后又使用对象式更新再次调用了setFormData。React会批量处理同一次事件内的所有状态更新，你最后那次调用传入的是当前闭包内的旧formData，会直接覆盖之前switch分支内的更新结果，所以看起来状态没有更新。

修复方案很简单，把最后一次的setFormData也改成函数式更新，就能拿到最新的状态值进行修改：

setFormData(prev => ({
  ...prev,
  [e.currentTarget.name]: e.currentTarget.value,
  email: email,
  user_name: username,
}));

也可以把switch分支内的状态修改逻辑和最后一次的合并，只调用一次setFormData，避免重复更新。

内容的提问来源于stack exchange，提问作者Joy Ram Sen Gupta