使用异步更新程序参数React,setState?

时间:2017-06-27 12:42:08

标签: reactjs typescript asynchronous setstate

有人知道在React中是否可以在setState(updater)中使用异步更新程序参数?我有以下代码无效(f被调用但UI未更新):

this.setState( async (prevState) => ({
   foo: await f(prevState.someData)
}))      

显然async参数是个问题。我不得不使用这个丑陋的替代版本:

this.setState( async (prevState) => {
   this.setState({
      foo: await f(prevState.someData)
   })      
})

有没有更好的方法来编写上面的代码?

3 个答案:

答案 0 :(得分:1)

然后你可以setState两次。

this.setState((prevState) => {
    f(prevState.someData);        

    // Don't change state now.
    return {}; 
})

async f(someData) {
  this.setState(prevState) {
    // Do something
  }
} 

答案 1 :(得分:0)

我假设你在一个方法上调用setState。那么为什么不在方法上设置异步呢?



async handleSomething () {
  //.. some logic

  this.setState(prevState => ({
    foo: await f(prevState.someData)
  }))
}




答案 2 :(得分:-1)

你不能在setState中使用async,因为setState需要是一个没有副作用的纯函数。只需在setState调用之前执行异步方法:

async classMethod = () => {
    let response = await someAsyncOperation(this.state.someData);
    this.setState({ someData: response });
}