React组件异步validateForm返回值失效，表单错误提交求助

嘿，我一眼就看到问题出在哪了——你在handleSubmit里调用异步的validateForm时，完全没处理它返回的Promise！因为validateForm是async函数，它默认返回的是Promise对象，不是你以为的布尔值。原来的if (this.validateForm())会把Promise直接当成true，所以不管验证通不通过，表单都会提交。

下面是一步步的修复方案：

1. 先把handleSubmit改成异步函数 #

你需要用await来获取validateForm的真实返回值，所以handleSubmit也得变成async的：

async handleSubmit(e) {
  e.preventDefault();
  // 用await等待验证结果
  const isFormValid = await this.validateForm();
  if (isFormValid) {
    // 这里再调用API提交数据
  }
}

2. 完善validateInput的返回值 #

你的validateInput只有在输入无效时才返回Promise，有效时啥也不返回，这会让await拿到undefined，虽然不会报错，但规范一点还是要统一返回Promise：

validateInput(input) {
  if (!input.validity.valid) {
    return new Promise((resolve) => {
      this.setState({ 
        dirtyFormInputs: [...this.state.dirtyFormInputs, input.name] 
      }, resolve);
    });
  }
  // 输入有效时返回一个已resolved的Promise
  return Promise.resolve();
}

3. 修复setState的异步更新问题 #

还有个隐藏坑：你在validateForm里先清空dirtyFormInputs，然后循环添加脏输入，但setState是异步的，循环里的this.state.dirtyFormInputs可能还是旧的空数组，导致最后dirtyFormInputs里只有最后一个无效输入。改成函数式更新就能解决这个问题：

async validateForm() {
  if (!this.theForm.checkValidity()) {
    // 先清空脏输入，用Promise等待setState完成
    await new Promise(resolve => {
      this.setState({ dirtyFormInputs: [] }, resolve);
    });
    for(let input of this.theForm){
      if (input.nodeName.toLowerCase() !== 'button') {
        await this.validateInput(input);
      }
    }
    return false;
  }
  return true;
}

// 对应的validateInput也改成函数式更新，确保拿到最新的state
validateInput(input) {
  if (!input.validity.valid) {
    return new Promise((resolve) => {
      this.setState(prevState => ({ 
        dirtyFormInputs: [...prevState.dirtyFormInputs, input.name] 
      }), resolve);
    });
  }
  return Promise.resolve();
}

这样改完之后，就能保证：

• 表单会真的等验证完成再决定是否提交
• dirtyFormInputs的更新不会丢失数据
• 所有异步操作都处理得规规矩矩的

内容的提问来源于stack exchange，提问作者André Teixeira