Блог

Можете ли вы написать асинхронный код в обратном вызове setState. Я пытаюсь реализовать проверку формы на уровне поля. Я хочу вызвать метод проверки после того, как метод onChange установил состояние в новое значение.

Я получил все, чтобы правильно работать с yup и его методом validateSync. Синхронный код работает правильно. Но в последнее время я подумал о повторной реализации логики, чтобы сделать код проверки асинхронным и использовать метод yup validate (async). Но после того, как он заработал и вернул значение после проверки, когда я пытаюсь установить состояние, возвращая новые значения, похоже, это ничего не делает.

код выглядит примерно так ->

edit -> setState обратный вызов вызывает validateFormField (извините, я понял, я пропустил некоторый код при попытке упростить его

 this.state = {
  formElements: [{}, {}, {}]    //array of objects having fields name, value, err, etc
}
handleChange(() => {
  this.setState(prevState => {
    //logic for updating the value
    return {formElements: newFormElements}
  }, () => {
    const formElements = this.state.formElements;
    validateFormField(fieldName);
  })
)

validateFormField(fieldName) {
  this.setState(prevState => {
    /*
      validateField -> Async function that has yup.validate which returns null
      in try block
      and throws error in the catch block with the formElements object updated
      with validation values
    */
    return validateField(fieldName)
      .then(() => {
      /* 
        expected behaviour up till this point and since there is nothing
        updated, I return null so as to tell react not to update the state
      */
      return null;
    })
    .catch(newFormElements => {
      /*
        expected behaviour untill this point and since formElements object
        is updated, I return the new object, so as to tell react to update
        the state with the new value
      */
      return {formElements: newFormElements};
     })
   })
 }
  

Также у меня есть два дополнительных вопроса, которые связаны с вышеупомянутым вопросом:

1> Есть ли какие-либо недостатки в использовании асинхронных проверок? Поскольку метод React setState также является асинхронным, это может вызвать неожиданное поведение, поскольку может возникнуть условие гонки. Как и в onChange, вызывает setState для следующего изменения значения до завершения асинхронного кода предыдущей проверки, в результате чего React выдает ошибку проверки, даже если новое значение является действительным.

2> Есть ли какие-либо недостатки в использовании проверок синхронизации? Причина, по которой я пытался реализовать логику асинхронной проверки, даже когда моя синхронизация работает отлично, заключается в том, что я слышал, что лучше всего использовать асинхронный код, когда это возможно, особенно для тяжелой работы, такой как проверка. Поскольку тяжелая проверка может привести к тому, что единственный поток будет занят, и ничто другое не сможет быть выполнено в этом цикле событий.

Вот как я бы это сделал.

 doSomethingSync(state) {
// ...
}
async doSomethingAsync(state) {
// ...
}

handleChange(() => {
  this.setState(prevState => {}, () => {
  doSomethingSync(state)
  doSomethingAsync(state).then().catch()
}