为何useEffect未按预期更新值？手机号正则验证异常排查

问题场景 #

需要验证的手机号规则为：+97798XXXXXXXX（即前缀+97798后紧跟10位数字）。

状态定义 #

const [mobile, setMobile] = useState("");
const [validMobile, setValidMobile] = useState(false);
const [focusMobile, setFocusMobile] = useState(false);

验证逻辑的useEffect代码 #

useEffect(() => {
  setValidMobile(MOBILE_REGEX.test(mobile));
  console.log("validMobile: " + validMobile);
  console.log("mobile: " + mobile);
}, [mobile]);

控制台输出异常表现 #

• 首次挂载时输出：

  validMobile: false
  mobile: (此问题非重点，暂不关注)
  

• 输入未达规则长度的内容时，每次输出：

  validMobile:false
  mobile: 输入的数字
  

• 输入符合规则的完整手机号（+9779812345678）时，输出：

  validMobile: false (本应为true，因已满足正则)
  mobile: +9779812345678
  

• 再输入一位字符（破坏规则的+97798123456789）时，输出反而变为：

  validMobile: true
  mobile: +97798123456789
  

输入框代码 #

<input
  name="mobile"
  type="text"
  placeholder="mobile number"
  required
  autoComplete="off"
  onChange={(e) => setMobile(e.target.value)}
  onClick={() => setFocusMobile(true)}
  onBlur={() => setFocusMobile(false)}
/>

原因解析 #

这个异常现象的核心是React状态更新的异步特性：

1. setValidMobile是异步更新状态的方法，调用它不会立刻修改validMobile的值，而是将状态更新任务加入React的更新队列，等待下一次渲染周期才会生效。
2. 在同一个useEffect回调里，调用setValidMobile后立刻执行console.log(validMobile)，此时拿到的是更新前的旧状态值，不是刚通过setValidMobile设置的新值。

具体流程还原：

• 当输入到符合规则的完整手机号时，MOBILE_REGEX.test(mobile)返回true，调用setValidMobile(true)，但此时validMobile还是之前的false，所以控制台打印旧值false。实际上validMobile的更新任务已在队列中，后续渲染会将其变为true，只是没有对应日志输出。
• 当再输入一位破坏规则的字符时，MOBILE_REGEX.test(mobile)返回false，调用setValidMobile(false)，但此时validMobile是上一次更新后的true，所以控制台打印这个旧值true。

另外需要确认你的MOBILE_REGEX是否正确：必须添加^和$来匹配整个字符串（比如/^\+97798\d{10}$/），否则会出现部分匹配的情况，导致验证逻辑本身出错。如果正则使用了全局标志g，还会出现test方法的lastIndex缓存问题，进一步干扰验证结果。

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