Метод не ожидает асинхронного вызова REST

Question

Я работаю с большим количеством асинхронных вызовов в моем приложении React, и мне бы хотелось, чтобы кто-то прояснил проблему, с которой я столкнулся.

Я пришел к этой проблеме, когда пытался выполнить два асинхронных вызова сперевождь.Я делал это несколько раз, и это всегда работало, однако на этот раз асинхронными вызовами пренебрегали - каким-то образом Promise был быстрее, чем мое действие с избыточностью.

• Я звонюэтот метод с помощью кнопки.

  handle = object => {
      if (object) {
          this.edit(object);
      }
  }
  

• , затем вызывается правка

  edit = async object => {
      await this.props.createElement(object); // sets editedElement in store via REST call, then dispatches an action
      this.propsdoSmthElse(this.props.editedElement); // do smth with store var
  }
  

• После вызова handle(), createElement()вызываемый, он ждет, пока не закончится, и затем вызывает doSmthElse(), однако editedElement в магазине не определено.

• Теперь, если я изменил его таким образом, он работает.this.props.editedElement is NOT undefined.Итак, я звоню только handle().Между ними нет метода, который не является async.

`

handle = async object => {
    if (object) {
        // sets editedElement in store via REST call, then dispatches an action
        await this.props.createElement(object);
        // do smth with store var
        this.props.doSmthElse(this.props.editedElement);
    }
}
`

Все методы находятся в mapDispatchToProps и this.props.editedElement вводится mapStateToProps.

const mapStateToProps = state => ({ 
    editedElement: state.someReducer.editedElement
});

const mapDispatchToProps = dispatch => ({
    createElement: object => dispatch(createElement(object)),
    doSmthElse: editedElement => dispatch(doSmthElse(editedElement))
});

Итак, вызов обоих методов сразу после нажатия кнопки работает для меня.Если я вызываю их из другой функции, это просто как-то не работает, и моя переменная хранилища не определена.Я заметил, что методы вызываются в правильном порядке, но первый пример не работает.

Есть идеи, что я делаю неправильно?

РЕДАКТИРОВАТЬ

1)

<Button onClick={this.handle}>ClickMe</Button>


handle = object => {
    if (object) {
        this.edit(object);
    }
}

edit = async object => {
    await this.props.createElement(object);
    console.log(this.props.editedElement);
    this.propsdoSmthElse(this.props.editedElement);
}

`

2)

<Button onClick={this.edit}>ClickMe</Button>


edit = async object => {
    await this.props.createElement(object);
    console.log(this.props.editedElement);
    this.propsdoSmthElse(this.props.editedElement);
}

`

• console.log() из 1) печатает undefined но 2) печатает полученный объект.Для обоих вариантов мой редуктор правильно печатает объект, и я всегда получаю его.

Answer 1

Попробуйте:

edit = async object => {
    await this.props.createElement(object); // sets editedElement in store via REST call, then dispatches an action
    await this.propsdoSmthElse(this.props.editedElement); // do smth with store var
}