React原生输入验证存在响应延迟问题求助

问题原因 #

React的useState状态更新是异步批量执行的，调用setFormErrors(validate(val))后，formErrors不会立刻更新为最新的验证错误对象。第一次点击提交时，你判断的还是更新前的空formErrors，所以控制台输出"No empty"；第二次点击时，状态已经完成更新，才能正确识别到错误。

解决方案 #

不要依赖更新后的formErrors状态做判断，而是直接使用validate函数返回的临时错误对象——它是同步生成的，能拿到最新的验证结果：

修改后的handleSubmit代码：

const handleSubmit = async (e) => {
  const val = {name};
  // 先同步获取验证结果
  const errors = validate(val);
  // 更新错误状态
  setFormErrors(errors);

  // 直接用刚生成的errors判断，而非formErrors状态
  if (Object.keys(errors).length === 0) {
    console.log('No empty');
  } else {
    console.log('Empty');
  }
};

这样修改后，首次点击提交就能立刻根据最新的验证结果输出正确信息，不会再出现延迟问题。

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