Fix setState detection in arrow functions (fixes #931)

Author: Yannick Croissant

lib/rules/no-set-state.js

@@ -4,6 +4,8 @@
  */
 'use strict';
 
+var Components = require('../util/Components');
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -18,7 +20,31 @@ module.exports = {
     schema: []
   },
 
-  create: function(context) {
+  create: Components.detect(function(context, components, utils) {
+
+    /**
+     * Checks if the component is valid
+     * @param {Object} component The component to process
+     * @returns {Boolean} True if the component is valid, false if not.
+     */
+    function isValid(component) {
+      return Boolean(component && !component.useSetState);
+    }
+
+    /**
+     * Reports usages of setState for a given component
+     * @param {Object} component The component to process
+     */
+    function reportSetStateUsages(component) {
+      var setStateUsage;
+      for (var i = 0, j = component.setStateUsages.length; i < j; i++) {
+        setStateUsage = component.setStateUsages[i];
+        context.report({
+          node: setStateUsage,
+          message: 'Do not use setState'
+        });
+      }
+    }
 
     // --------------------------------------------------------------------------
     // Public
@@ -28,24 +54,31 @@ module.exports = {
 
       CallExpression: function(node) {
         var callee = node.callee;
-        if (callee.type !== 'MemberExpression') {
+        if (
+          callee.type !== 'MemberExpression' ||
+          callee.object.type !== 'ThisExpression' ||
+          callee.property.name !== 'setState'
+        ) {
           return;
         }
-        if (callee.object.type !== 'ThisExpression' || callee.property.name !== 'setState') {
-          return;
-        }
-        var ancestors = context.getAncestors(callee);
-        for (var i = 0, j = ancestors.length; i < j; i++) {
-          if (ancestors[i].type === 'Property' || ancestors[i].type === 'MethodDefinition') {
-            context.report({
-              node: callee,
-              message: 'Do not use setState'
-            });
-            break;
+        var component = components.get(utils.getParentComponent());
+        var setStateUsages = component && component.setStateUsages || [];
+        setStateUsages.push(callee);
+        components.set(node, {
+          useSetState: true,
+          setStateUsages: setStateUsages
+        });
+      },
+
+      'Program:exit': function() {
+        var list = components.list();
+        for (var component in list) {
+          if (!list.hasOwnProperty(component) || isValid(list[component])) {
+            continue;
           }
+          reportSetStateUsages(list[component]);
         }
       }
     };
-
-  }
+  })
 };

tests/lib/rules/no-set-state.js

@@ -107,5 +107,34 @@ ruleTester.run('no-set-state', rule, {
     errors: [{
       message: 'Do not use setState'
     }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  someMethod = () => {',
+      '    this.setState({',
+      '      name: this.props.name.toUpperCase()',
+      '    });',
+      '  }',
+      '  render() {',
+      '    return <div onClick={this.someMethod.bind(this)}>Hello {this.state.name}</div>;',
+      '  }',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Do not use setState'
+    }]
+  }, {
+    code: [
+      'class Hello extends React.Component {',
+      '  render() {',
+      '    return <div onMouseEnter={() => this.setState({dropdownIndex: index})} />;',
+      '  }',
+      '};'
+    ].join('\n'),
+    parser: 'babel-eslint',
+    errors: [{
+      message: 'Do not use setState'
+    }]
   }]
 });