react中setState三种用法

1.对象

this.setState({})

2.函数

当参数是函数的时候， setState() 会将上一个 setState() 的结果作为参数传入这个函数

    this.setState((prevstate) => {
      return {
        list: [...prevstate.list, prevstate.inputVal],
        inputVal: ''
      }
    })

3.回调函数

setState() 第二个参数是一个回调函数，表示 state 更新完成

this.setState({
 msg: '更新state msg'
}, () => {
 console.log('state 更新完毕')
})

根据这个可以使用Promise以及async/await,封装成同步操作

setStateAsync(state) {
 return new Promise(resolve => {
  this.setState(state, resolve)
 })
}
// 使用
async add() {
 await setStateAsync({ counter: this.state.counter + 1 })
 console.log('state 更新完毕')
}

或者直接使用async

  async addList() {
  
    await this.setState((prevstate) => {
      return {
        list: [...prevstate.list, prevstate.inputVal],
        inputVal: ''
      }
    })
    console.log(this.state)
  }