ESLint 抱怨从未使用过局部状态变量 no-unused-vars

Posted 2023-02-21

【中文标题】ESLint 抱怨从未使用过局部状态变量 no-unused-vars

【英文标题】：ESLint complains that a local state variable is never used no-unused-vars

【发布时间】：2020-09-12 17:36:57

【问题描述】：

问题：

ESLint 在 VSCode 中发出“X 被赋值但从未使用过。eslint(no-unused-vars)”错误：

no-unused-vars 规则。

但是在这个 jsx 部分中引用了变量：

我添加了应该告诉 eslint 在涉及 JSX 时行为正确的规则： （.eslintrc.json 部分）

  "extends": [
    "eslint:recommended",
    "plugin:react/recommended",
    "plugin:import/errors",
    "plugin:jsx-a11y/recommended",
    "plugin:react-hooks/recommended",
    "prettier",
    "prettier/react"
  ],
  "plugins": ["react", "import", "jsx-a11y", "react-hooks"],
  "rules": 
    "react/prop-types": 0,
    "react/jsx-uses-react": 1,
    "react/jsx-uses-vars": 1,
    "no-console": 1,
    "react-hooks/rules-of-hooks": "error",
    "react-hooks/exhaustive-deps": "warn"
  ,

相关数据：

React 组件...

import React,  useState  from 'react';
import  ANIMALS as kANIMALS  from '@frontendmasters/pet';

const SearchParams = () => 
  const [location, setLocation] = useState('Seattle, WA');
  const [animal, setAnimal] = useState('Animal');

  return (
    <div className="search-params">
      <form>
        <h1>location</h1>
        <label htmlFor="">
          Location
          <input
            id="location"
            type="text"
            value=location
            placeholder="Location"
            onChange=(evt) => setLocation(evt.target.value)
          />
        </label>
        <label htmlFor="animal">
          <select
            name="animal"
            id="animal"
            onBlur=(evt) => setAnimal(evt.target.value)
          >
            <option value="All">All</option>
            kANIMALS.map((animal) => (
              <option key=animal value=animal>
                animal
              </option>
            ))
          </select>
        </label>
        <button>Submit</button>
      </form>
    </div>
  );
;

export default SearchParams;

.eslintrc.json 文件

import React,  useState  from 'react';
import  ANIMALS as kANIMALS  from '@frontendmasters/pet';

const SearchParams = () => 
  const [location, setLocation] = useState('Seattle, WA');
  const [animal, setAnimal] = useState('Animal');

  return (
    <div className="search-params">
      <form>
        <h1>location</h1>
        <label htmlFor="">
          Location
          <input
            id="location"
            type="text"
            value=location
            placeholder="Location"
            onChange=(evt) => setLocation(evt.target.value)
          />
        </label>
        <label htmlFor="animal">
          <select
            name="animal"
            id="animal"
            onBlur=(evt) => setAnimal(evt.target.value)
          >
            <option value="All">All</option>
            kANIMALS.map((animal) => (
              <option key=animal value=animal>
                animal
              </option>
            ))
          </select>
        </label>
        <button>Submit</button>
      </form>
    </div>
  );
;

export default SearchParams;

package.json 依赖项

  "devDependencies": 
    "eslint": "^7.1.0",
    "eslint-config-prettier": "^6.11.0",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-jsx-a11y": "^6.2.3",
    "eslint-plugin-react": "^7.20.0",
    "eslint-plugin-react-hooks": "^4.0.2",
    "parcel-bundler": "^1.12.4",
    "prettier": "^2.0.5"
  ,
  "dependencies": 
    "@frontendmasters/pet": "^1.0.3",
    "react": "^16.13.1",
    "react-dom": "^16.13.1"
  

【参考方案1】：

ESLint 抱怨本地状态变量从不使用 no-unused-vars

map() 内的animal 的作用域与animal 状态变量的作用域不同。

const [animal, setAnimal] = useState('Animal'); // state variable (component scope)

对比

kANIMALS.map((animal) => (
  <option key=animal value=animal> // map scope
    animal
  </option>
))

这通常被称为variable shadowing，可以通过no-shadow规则检测到。

【讨论】：

我不敢相信我花了几分钟盯着这个而没有注意到阴影... :( 谢谢！

@GilsonCavalcanti，很高兴为您提供帮助！

这就是为什么对阴影进行 lint 总是有用的。这实际上也发生在我身上，我的 linter 现在警告我注意阴影。