Question

我正在React应用程序中处理大量异步调用，我希望有人澄清我遇到的问题。

在尝试使用redux进行两个异步调用时遇到了这个问题。我已经做过几次了，而且一直有效，但是这一次，异步调用被忽略了，以某种方式Promise比我的redux动作快。

我正在通过按钮调用此方法。

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未定义否。因此，我仅呼叫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
}

方法不等待异步REST调用

1 个答案: