React的多个setState之间数据不互通解决方法

this.setState的使用

语法

1. 简易写法：直接传入对象实现。

   this.setState({
       a:1，
       b:2
   })
   

• 注意：这种写法无法及时获取到最新的state值，也就是多个setState之间是相互异步的。不推荐这种方式例如：

• handleClick = () => {
          this.setState({
              a:this.state.a + 1
          })
          console.log(this.state.a); // 0 1
          this.setState({
              a:this.state.a + 1
          })
          console.log(this.state.a); // 0 1
  
      }
  

2. 推荐使用

   this.setState(updater,callback)
   

• 参数：updater有两个参数，state和props，其中state一定是最新的

• 代码：

  this.setState((state,props) => ({
       a:state.a + 1
  }))
  
  console.log(this.state.a);  // 0 2
  this.setState((state,props) => ({
        a:state.a + 1
  }))
  console.log(this.state.a); // 0 2
  

完整代码

import React from 'react'
class Test1 extends React.Component{
    state = {
        a:0    
    }

    handleClick = () => {
        // this.setState({
        //     a:this.state.a + 1
        // })
        // console.log(this.state.a); // 0 1
        // this.setState({
        //     a:this.state.a + 1
        // })
        // console.log(this.state.a); // 0 1
        this.setState((state,props) => ({
            a:state.a + 1
        }))

        console.log(this.state.a);  // 0 2
        this.setState((state,props) => ({
            a:state.a + 1
        }))
        console.log(this.state.a); // 0 2
    }



    render(){
        return (
            <button onClick={this.handleClick} >点击触发setState异步</button>
        )
    }
}

export default Test1