ESLint жалуется, что локальная переменная состояния никогда не используется no-unused-vars - PullRequest
Новая
       27

ESLint жалуется, что локальная переменная состояния никогда не используется no-unused-vars

0 голосов
/ 26 мая 2020

Проблема:

ESLint выдает ошибку «X имеет значение, но никогда не используется. Eslint (no-unused-vars)» в VSCode:

no-unused-vars

no-unused-vars правило.

Но на переменную есть ссылка внутри этой части jsx: enter image description here

Я добавил правила, которые должны указывать eslint правильное поведение, когда дело доходит до JSX: ( .eslintr c. 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;

.eslintr c . 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;

пакет. 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 Ответ

2 голосов
/ 26 мая 2020

ESLint жалуется, что локальная переменная состояния никогда не используется no-unused-vars

Область действия animal внутри map() отличается от области animal переменная состояния. 

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

по сравнению с 

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

Это обычно известно как затенение переменных и может быть обнаружено с помощью no-shadow правило.

...