Merge pull request #1610 from pfhayes/setstate

Exclude references to this.state in setState callback

Author: ljharb

lib/rules/no-access-state-in-setstate.js

@@ -29,6 +29,16 @@ module.exports = {
         node.callee.object.type === 'ThisExpression';
     }
 
+    function isFirstArgumentInSetStateCall(current, node) {
+      if (!isSetStateCall(current)) {
+        return false;
+      }
+      while (node && node.parent !== current) {
+        node = node.parent;
+      }
+      return current.arguments[0] === node;
+    }
+
     // The methods array contains all methods or functions that are using this.state
     // or that are calling another method or function using this.state
     const methods = [];
@@ -58,7 +68,7 @@ module.exports = {
         // to further check if they contains this.state
         let current = node.parent;
         while (current.type !== 'Program') {
-          if (isSetStateCall(current)) {
+          if (isFirstArgumentInSetStateCall(current, node)) {
             const methodName = node.callee.name;
             methods.map(method => {
               if (method.methodName === methodName) {
@@ -83,7 +93,7 @@ module.exports = {
           let current = node;
           while (current.type !== 'Program') {
             // Reporting if this.state is directly within this.setState
-            if (isSetStateCall(current)) {
+            if (isFirstArgumentInSetStateCall(current, node)) {
               context.report(
                 node,
                 'Use callback in setState when referencing the previous state.'
@@ -132,7 +142,7 @@ module.exports = {
           current.parent.object === current
         ) {
           while (current.type !== 'Program') {
-            if (isSetStateCall(current)) {
+            if (isFirstArgumentInSetStateCall(current, node)) {
               vars
                 .filter(v => v.scope === context.getScope() && v.variableName === node.name)
                 .map(v => context.report(

tests/lib/rules/no-access-state-in-setstate.js

@@ -65,6 +65,25 @@ ruleTester.run('no-access-state-in-setstate', rule, {
       });
     `,
     parserOptions: parserOptions
+  }, {
+    // issue 1604: allow this.state in callback
+    code: `
+      var Hello = React.createClass({
+        onClick: function() {
+          this.setState({}, () => console.log(this.state));
+        }
+      });
+    `,
+    parserOptions: parserOptions
+  }, {
+    code: `
+      var Hello = React.createClass({
+        onClick: function() {
+          this.setState({}, () => 1 + 1);
+        }
+      });
+    `,
+    parserOptions: parserOptions
   }, {
     code: [
       'var Hello = React.createClass({',
@@ -150,6 +169,30 @@ ruleTester.run('no-access-state-in-setstate', rule, {
     errors: [{
       message: 'Use callback in setState when referencing the previous state.'
     }]
+  }, {
+    code: `
+      var Hello = React.createClass({
+        onClick: function() {
+          this.setState(this.state, () => 1 + 1);
+        }
+      });
+    `,
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Use callback in setState when referencing the previous state.'
+    }]
+  }, {
+    code: `
+      var Hello = React.createClass({
+        onClick: function() {
+          this.setState(this.state, () => console.log(this.state));
+        }
+      });
+    `,
+    parserOptions: parserOptions,
+    errors: [{
+      message: 'Use callback in setState when referencing the previous state.'
+    }]
   }, {
     code: [
       'var Hello = React.createClass({',