在React组件上返回true或false的异步方法

Question

我正在处理一个处理表单提交的React组件。

<form
    name="theForm"
    ref={(el) => { this.theForm = el }}
    onSubmit={this.handleSubmit}
    noValidate
>

在提交事件处理程序上，我使用HTML5形式的checkvalidity（）调用另一个函数validateForm（）来执行验证。

handleSubmit(e) {
    e.preventDefault();
    if (this.validateForm()) {
        //Call the api to post data
    }
}

如果validateForm的有效性为false，我将填充一个称为dirtyFormInputs的状态列表，该列表将传递给表单的子组件。

由于setState的异步行为，我更改了代码以使用async / await处理对dirtyFormInputs列表的更新，如下所示：

async validateForm() {
    const formLength = this.theForm.length;

    if (this.theForm.checkValidity() === false) {
        this.setState({ dirtyFormInputs: [] });  
        for(let input of this.theForm){
            input.nodeName.toLowerCase() !== 'button' 
                && await this.validateInput(input);
        }
        return false;
    }
    return true;
}

但是由于我更改了validateInput方法以正确更新dirtyFormInputs，validateForm（）上的return false语句不再有效，即使有效性检查失败，我的表单也将提交。

validateInput(input) {
    if (!input.validity.valid) {
        return new Promise((resolve) => {
            this.setState({
                dirtyFormInputs: [...this.state.dirtyFormInputs, input.name]
            }, resolve)
        });
    }
}

Answer 1

validateForm声明为async因此会返回一个async 。

您需要等待诺言解决：

handleSubmit(e) {
  e.preventDefault();
  this.validateForm().then(result => { // or use `async` + `await`
    if (!result) return; 
    //Call the api to post data
  });
}

Answer 2

异步效果会感染其接触的所有内容。 因此，您需要在handleSubmit处理验证的异步性质

async handleSubmit(e) {
    e.preventDefault();
    if (await this.validateForm()) {
        //Call the api to post data
    }
}