[Fix] destructuring-assignment: detect refs nested in functions

Fixes #3102
jsx-eslint · Oct 23, 2021 · 182e95d · 182e95d
1 parent 8a0b352
commit 182e95d
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -15,8 +15,10 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`jsx-props-no-multi-spaces`]: avoid a crash on long member chains in tag names in `typescript-eslint` parser (@ljharb)
 * [`no-unused-prop-types`], `usedPropTypes`: avoid crash with typescript-eslint parser (@ljharb)
 * [`display-name`]: unwrap TS `as` expressions ([#3110][] @ljharb)
+* [`destructuring-assignment`]: detect refs nested in functions ([#3102] @ljharb)
 
 [#3110]: https://github.com/yannickcr/eslint-plugin-react/pull/3110
+[#3102]: https://github.com/yannickcr/eslint-plugin-react/issue/3102
 [#3092]: https://github.com/yannickcr/eslint-plugin-react/pull/3092
 [#2166]: https://github.com/yannickcr/eslint-plugin-react/pull/2166
 [#1980]: https://github.com/yannickcr/eslint-plugin-react/pull/1980

diff --git a/lib/rules/destructuring-assignment.js b/lib/rules/destructuring-assignment.js
@@ -182,11 +182,17 @@ module.exports = {
       'FunctionExpression:exit': handleStatelessComponentExit,
 
       MemberExpression(node) {
-        const SFCComponent = components.get(context.getScope(node).block);
-        const classComponent = utils.getParentComponent(node);
+        let scope = context.getScope(node);
+        let SFCComponent = components.get(scope.block);
+        while (!SFCComponent && scope.upper && scope.upper !== scope) {
+          SFCComponent = components.get(scope.upper.block);
+          scope = scope.upper;
+        }
         if (SFCComponent) {
           handleSFCUsage(node);
         }
+
+        const classComponent = utils.getParentComponent(node);
         if (classComponent) {
           handleClassUsage(node);
         }

diff --git a/tests/lib/rules/destructuring-assignment.js b/tests/lib/rules/destructuring-assignment.js
@@ -529,6 +529,17 @@ ruleTester.run('destructuring-assignment', rule, {
         {
           messageId: 'useDestructAssignment',
           data: { type: 'props' },
+          line: 5,
+        },
+        {
+          messageId: 'useDestructAssignment',
+          data: { type: 'props' },
+          line: 7,
+        },
+        {
+          messageId: 'useDestructAssignment',
+          data: { type: 'props' },
+          line: 8,
         },
       ],
     },
@@ -565,5 +576,44 @@ ruleTester.run('destructuring-assignment', rule, {
         },
       ],
     },
+    {
+      code: `
+        import React from 'react';
+
+        const TestComp = (props) => {
+          props.onClick3102();
+        
+          return (
+            <div
+              onClick={(evt) => {
+                if (props.onClick3102) {
+                  props.onClick3102(evt);
+                }
+              }}
+            >
+              <div />
+            </div>
+          );
+        };
+      `,
+      parser: parsers.BABEL_ESLINT,
+      errors: [
+        {
+          messageId: 'useDestructAssignment',
+          data: { type: 'props' },
+          line: 5,
+        },
+        {
+          messageId: 'useDestructAssignment',
+          data: { type: 'props' },
+          line: 10,
+        },
+        {
+          messageId: 'useDestructAssignment',
+          data: { type: 'props' },
+          line: 11,
+        },
+      ],
+    },
   ]),
 });