[Bug]: react/jsx-key does not detect usage of `Array.push` etc. · jsx-eslint/eslint-plugin-react#3937

(3 评论) (0 反应) (0 负责人)JavaScript (8,630 star) (2,797 fork)batch import

enhancementhelp wanted

描述

Is there an existing issue for this?

I have searched the existing issues and my issue is unique
My issue appears in the command-line and not only in the text editor

Description Overview

Tl;dr the lint rule doesn't pick up items that are inserted into an array via push/unshift etc.

Expected Behavior

I've seen this pattern many times and I think we could reasonably assume that when the method name matches an array insertion method we can report an error.

This isn't foolproof without type information but I think this will be valuable.

Example:

const Comp = () => {
   const items = [];
   if (someCondition) {
      // this should cause an error/warning
      items.push(<span>test</span>);
   }
   if (someOtherCondition) {
      // same
      items.push(<span>test2</span>);
   }
   return <div>{items}</div>;
}

eslint-plugin-react version

7.37.5

eslint version

9.30.1

node version

贡献者指南

技术栈: javascripttypescriptreactnodejs
领域: frontendtooling
议题类型: bug
难度: 3
预计时间: 1-3 hours
活动状态: fresh
清晰度: clear
前置要求: ESLint plugin developmentAST traversalReact JSX syntax
新手友好度: 70
研究方向: Examine the existing `jsx key` rule in `lib/rules/jsx key.js` to understand how it currently detects missing keys in loops (e.g., `map`). Extend the logic to also flag when JSX elements are passed to array methods like `push`, `unshift`, `splice`, etc. Look at how the rule collects JSX elements and where it reports errors. Consider using AST node types like `CallExpression` with callee property `push`. Check any existing tests in `tests/lib/rules/jsx key.js` to add new test cases. Ensure the rule does not produce false positives for non array variables.