Question

我是React的新手，我正在寻求实现这种流程：

// set the state
// execute a function `f` (an async one, which returns a promise)
// set the state again
// return the promise value from the previous function

所以，我现在正在做的是以下事情：

async function handleSomething() {
  this.setState((prevState) => { ... },
    () => {
      let result = await f()
      this.setState((prevState) => { ... },
        ...
      )
    })
  return result;
}

希望您对我想要实现的目标有所了解。基本上，我想获得result，这是从await到f返回的值，并在handleSomething中返回它，以便可以在其他地方使用它，但可以将它包装起来在这些setState调用中：

// g()
//   setState
//     res = f()
//       setState
//   return res

我的问题是，如何正确执行此操作？也许我应该用结果值修改状态并从那里得到它？。

编辑：

handleSomething的用法：

// inside some async function
let result = await handleSomething()

Answer 1

您可以创建一个Promise，一旦完成两个setState调用，便可以解决：

function handleSomething() {
  return new Promise(resolve => {
    this.setState(
      prevState => {
        /*...*/
      },
      async () => {
        let result = await f();
        this.setState(
          prevState => {
            /*...*/
          },
          () => resolve(result)
          //    ^^^^^^^ resolve the promise with the final result
        );
      }
    );
  });
}

使用方式如下：

this.handleSomething.then(result => /* ... */)

// or

const result = await this.handleSomething();

反应setState回调返回值

1 个答案: