Асинхронный метод для возврата true или false на компонент React - PullRequest
Новая
       21

Асинхронный метод для возврата true или false на компонент React

0 голосов
/ 16 мая 2018

Я работаю над компонентом 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 я изменил свой код для обработки обновлений в списке dirtyFormInputs с помощью async / await следующим образом: 

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, оператор return false для validateForm () больше не действует, и моя форма отправляется даже при сбое проверки valitidy. 

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

Ответы [ 2 ]

0 голосов
/ 16 мая 2018

Асинхронный эффект заражает все, к чему прикасается. Таким образом, вам нужно обработать асинхронный характер вашей проверки внутри handleSubmit

async handleSubmit(e) {
    e.preventDefault();
    if (await this.validateForm()) {
        //Call the api to post data
    }
}
0 голосов
/ 16 мая 2018

validateForm возвращает обещание, поскольку оно объявлено async.

Вам нужно дождаться разрешения обещания: 

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