javascript - React setState 回调返回值

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，这是从 awaiting f 返回的值，并在 handleSomething 中返回它所以我可以在另一个地方使用它，但将它包装在那些 setState 调用中:

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

我的问题是，我怎样才能正确地做到这一点？也许我应该用结果值修改状态并从那里获取它？

编辑:

handleSomething 的用法:

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

Answer 1

您可以创建一个在 setState 调用完成后解析的 Promise:

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();