1、react 解决this.setState修改数据异步问题

解决异步：

1、nextState（推荐）

import React from 'react'

class Home extends React.Component{

    constructor(props){

        super(props);

        this.state = {

            data :0

        }

    }

    componentDidMount(){

       this.timer = setInterval(()=>{this.setState({date:new Date()})},1000)

    }

    componentWillMount(){

        clearInterval(this.timer)

    }

    render(){

        return(

        <React.Fragment>

            <p>{this.state.data}</p>

            <button onClick={this.add}>点击</button>

        </React.Fragment>

        )

    }

    // 异步问题复现

    // add = ()=>{

    //     this.setState({

    //         data:this.state.data+1

    //     })

    //     this.setState({

    //         data:this.state.data+2

    //     })

    //     console.log(`点击${this.state.data}`);

    // }

    // 解决方法一

    add = ()=>{

        this.setState(nextState=>({data:nextState.data+1}))

        this.setState(nextState=>({data:nextState.data+2}))

        console.log(`点击${this.state.data}`)

    }

 

   //方法二setTimeout()：

        add = ()=>{

            setTimeout(()=>{

                this.setState({data:this.state.data+1})

                this.setState({data:this.state.data+2})

            },0)

        }

  //方法三事件委托：

          

          componentDidMount(){

             this.timer = setInterval(()=>{this.setState({date:new Date()})},1000);

             document.getElementsByTagName("button")[0].addEventListener('click',

               ()=>{

                  this.setState({

                     data:this.state.data+1

                  })

                 console.log(`点击${this.state.data}`)  

               })

          }

export default Home;