no-access-state-in-setstate bug?

[fohrloop]

Hi,

The react/no-access-state-in-setstate rule should prevent usage of this.state inside setState calls. I can see the it generating error with the following code:

Example with errors / trigger

import React from 'react'

class Test extends React.Component {
  state = { count: 0 }

  handleClick = () => {
    this.setState({ count: this.state.count + 1 })
  }
  render() {
    return <p onClick={this.handleClick}>{this.state.count}</p>
  }
}

export default Test

but when the state variable is destructured from this.state, there will be no errors/warnings:

Example without errors / trigger

import React from 'react'

class Test extends React.Component {
  state = { count: 0 }

  handleClick = () => {
    const { state } = this
    this.setState({ count: state.count + 1 })
  }
  render() {
    const { state } = this
    return <p onClick={this.handleClick}>{state.count}</p>
  }
}

export default Test

This is especially troublesome when using react/destructuring-assignment with the react/no-access-state-in-setstate.

System & setup

Windows 10, node v.8.9.3, eslint-plugin-react v. 7.5.1, ESLint v.3.19.0 & babel-eslint 8.0.3, using the rule 'react/no-access-state-in-setstate': 2.

[jaaberg]

Nice find!

I had to dive into this, and hopefully fixed it in #1598.
Also made this while fiddling around to show that it works. Hope this helps :)