操作react中的数据，及抽离函数时this指向问题的解决

react中需要操作数据的一般都用类组件，数据放在state中，操作数据需要在setState中写代码，直接修改state中的数据会报错，

我在写代码的时候发现react好像不支持变量++这种书写方式，用this.state.count++,点击按钮没有反应，

class Hello extends React.Component {
  state = {
    count: 10
  }
  render() {
    return (
      <div>
        <h1>数量：{this.state.count}</h1>

        <button onClick={() => {
          this.setState({
            count: this.state.count+1
            // count: this.state.count++ 这边没有反应，用箭头函数是因为this指向上一级，是组件实例对象
          })
        }}>点我加1</button>
      </div>
    )
  }
}

将操作数据的逻辑抽离出来时，会报错，原因是this指向的问题，抽离出来后this指向undefined，应该要指向组件实例对象才行，

解决办法1，用箭头函数调用方法，箭头函数的this看上一级

 addNum(){
    this.setState({
      count: this.state.count+1
      // count: this.state.count++ 这边没有反应
    })
  }
  render() {
    return (
      <div>
        <h1>数量：{this.state.count}</h1>
        <button onClick={()=> this.addNum()}>点我加1</button>
      </div>
    )
  }

 方式二：用bind改变函数的this指向，constructor构造函数中的this指向是组件实例对象

 constructor(){
    super()
    this.state = {
      count: 10
    }
    this.addNum = this.addNum.bind(this)

  }

  addNum(){
    this.setState({
      count: this.state.count+1
      // count: this.state.count++ 这边没有反应
    })
  }
  render() {
    return (
      <div>
        <h1>数量：{this.state.count}</h1>
        <button onClick={this.addNum}>点我加1</button>
      </div>
    )
  }

第三种方法是在定义方法的时候就用箭头函数，具体如下

addNum = () =>{
    this.setState({
      count: this.state.count+1
      // count: this.state.count++ 这边没有反应
})