react setState 是异步的吗？怎么用同步的 setState?

Question

import React, { Component } from 'react'

export default class index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      obj: {page: 1,foo: 'bar'}
    }
  }
  /**
   * output:
   * 第一次 click  {foo: "bar", page: 1}
   * 第二次 click  {page: 2}
   * @memberof index
   */
  xxx = () => {
    this.setState({
      obj: {
        page: this.state.obj.page + 1
      }
    })
    console.log(this.state.obj);
  }
  render() {
    return (
      <div>
        <h1>Test</h1>
        <button onClick={() => this.xxx()}>click me</button>
      </div>
    )
  }
}

上例期望得到

/**
   * output:
   * 第一次 click  {page: 2}
   * 第二次 click  {page: 3}
   * @memberof index
   */

Answer 1

this.setState(
  state => ({ obj: { page: state.obj.page + 1 } }),
  () => {
    console.log(this.state.obj)
  },
)

---

setState(updater[, callback])

setState可以接受两个参数,第二个参数可选.
第一个参数可以是一个函数或者一个对象.
如果直接传对象的就是执行对象跟state的浅合并.
如果传入一个函数,则会把函数的返回对象跟state进行浅合并,这个函数会传入两个参数state和props,返回一个对象

(state, props) => stateChange

第二个参数,是state更新完毕之后,调用的回调函数,如果有需要在state更新之后的操作,可以放在这里,不过官方更建议在componentDidUpdate里面处理更新之后的操作.

官方文档

Answer 2

setState本身不是异步的，不过是为了性能优化，没有立即更新

Answer 3

第二个参数 回调里获取

this.setState({},()=>{
    console.log(this.state.obj);
})