React的setState使用promise作为回调函数

Question

当我试图在React中使用Promise作为回调函数来设置状态时，我收到了一个错误。这很可能是我的错误导致的，我希望能够对React中的setState进行一些澄清。我收到的错误消息如下：

ERR:“传递的回调参数无效。期望传递一个函数，但实际接收到的是：[object Promise]”

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

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

// Async function 

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

- o1n3n21

---

这应该是 this.setState({ value: v }, this.callAsync)，对吗？ - raina77ow

是的，抱歉。我会更新的！ - o1n3n21

Answer 1

关于您原问题中的代码：

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

async函数总是返回一个promise，这个promise并不是回调函数。在您的情况下，由于您在callAsync中没有进行return，这个promise会解析为undefined。

如果您的目标是在状态更新完成后调用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返回的Promise被拒绝，您将会遇到未处理的解决方案错误。

---

关于您修改后的问题中的代码：

这只是一个简单的情况，回调中this不是您所期望的，如在本问题的答案中详细描述。上面的解决方案也很方便地适用于此；它是那里列出的答案之一。并且它正确处理错误，而那个问题的其他答案（例如使用this.callAsync.bind(this)）则不会。

- T.J. Crowder