方法不等待异步REST调用

Question

I am working with a lot of async calls in my React app and I would like someone to clarify an issue I ran into.

I came to this issue while I was trying to do two async calls with redux. I've done this a few times and it always worked, however this time, the async calls were neglected - somehow the Promise was faster than my redux action.

• I am calling this method via a button.

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

• then edit is called

   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 } 

• After calling handle() , createElement() is called, it waits till it finishes and then calls doSmthElse() , however, editedElement is undefined in store.

• Now, if I changed it up like this, it works. this.props.editedElement is NOT undefined. So, I'm calling only handle() . There's no method in between which is not 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);
    }
}
`

All methods are in mapDispatchToProps and this.props.editedElement is brought in by mapStateToProps .

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

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

So, calling both methods right after clicking the button works for me. If I call them from another function, it just fails somehow and my store variable is undefined. I noticed that the methods are being called in the right order, but the first example doesn't work.

Any idea what I'm doing wrong?

EDIT

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() from 1) prints undefined but 2) prints the received object. For both variants, my reducer correctly prints the object and I always receive one.

Answer 1

Try:

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
}