Question

我在使用Promise作为React中的回调尝试使用SetState时收到错误。这可能是由于我的错误，并希望对React中的设置状态做一些澄清。我收到的错误信息如下。

错误：“作为回调传递的参数无效。期望一个函数。而是收到：[object Promise]”

我已经重构了下面的代码示例（编辑），试图为其他人提供使用。

    this.setState({ value: v }, this.callAsync)

// Async function 

  callAsync = async () => {
    await this.props.foo({
    // Something async-y
   })
 .then(success => console.log(success)
 }

Answer 1

重新计算original question中的代码：

this.setState({ value: v }, this.callAsync())

async函数始终会返回一个承诺，当然不是回调。在您的情况下，由于您未在undefined中完成return，因此该承诺会以callAsync结算。

如果你的目标是在状态更新完成后调用callAsync，那么将调用包装在另一个函数中，例如：

this.setState({value: v}, async () => {
    try {
        await this.callAsync();
    } catch (e) {
        // handle error
    }
});

或

this.setState({value: v}, () => {
    this.callAsync().catch(e => {
        // handle error
    });
});

请注意，处理潜在错误至关重要;否则，如果this.props.foo返回的承诺被拒绝，您将收到未处理的解决方案错误。

重新计算modified question中的代码：

这只是this在回调中不符合预期的简单情况，如described in detail in this question's answers。 上面的解决方案也适用于此，方便;它是那里答案列出的解决方案之一。并且它正确处理错误，其他一些问题的答案（例如使用this.callAsync.bind(this)）赢了。

使用promise作为回调来实现setState

1 个答案: