React状态毫秒级快速变更时组件未重新渲染问题咨询

核心结论 #

不会存在“状态变更速度过快导致变更被丢弃”的情况，你观测到的newState没有触发渲染，是React的批量更新合并+状态浅比较机制导致的：

1. 同一执行上下文中的多次setState默认会被React合并为一次更新处理，不会逐次触发渲染
2. 你的示例中状态最终回滚为初始的originalState，和当前状态浅比较结果相等，React就会跳过本次渲染，中间的newState不会产生可见的渲染结果

对应你要的「先清空状态再更新，强制屏幕阅读器播报」场景，有两种成熟解决方案： #

方案1：使用flushSync强制同步渲染 #

用react-dom提供的flushSync API包裹第一次状态变更，强制React立即执行这部分更新、触发渲染，再执行后续的状态变更：

import { flushSync } from 'react-dom';

// 先同步清空状态，立即触发一次渲染
flushSync(() => {
  setState(''); // 对应你的清空操作
});
// 再更新为实际的错误信息，会触发第二次渲染
setState('你的错误提示文本');

方案2：通过修改key强制重建组件 #

给展示错误信息的组件绑定动态key，每次需要重新播报时更新key值，React会销毁旧组件实例、重新创建渲染新组件，天然触发屏幕阅读器读取新内容：

// 额外声明一个计数状态作为key
const [errMsgKey, setErrMsgKey] = useState(0);
const [errMsg, setErrMsg] = useState('');

// 需要重新播报时调用
const refreshErrMsg = (newMsg) => {
  setErrMsgKey(prev => prev + 1);
  setErrMsg(newMsg);
}

// 渲染时绑定key
<div className="err-tip" key={errMsgKey} role="alert">
  {errMsg}
</div>

补充说明：如果两次状态变更分别放在不同的宏任务中（比如第二次写在setTimeout(callback, 0)里），也会触发两次渲染，但flushSync和动态key的方案时序更稳定，不需要依赖定时器的执行时机。

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