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

【问题标题】：Async method to return true or false on React component在 React 组件上返回 true 或 false 的异步方法
【发布时间】：2018-10-26 07:25:34
【问题描述】：

我正在开发一个处理表单提交的 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 的有效性为假，我会填充一个名为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)
        });
    }
}

【问题讨论】：

Asynch 方法由于它的异步特性，不能返回任何东西，除了新世界中的 Promise 之外

标签： javascript reactjs ecmascript-6 async-await es6-promise

【解决方案1】：

validateForm 返回一个承诺，因为它被声明为async。

你需要等待promise解决：

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

【讨论】：

【解决方案2】：

异步效果会感染它接触到的一切。因此，您需要在 handleSubmit 中处理验证的异步性质

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

【讨论】：