Визуализация списка в React и получение Eslint ошибки «нет неиспользованных выражений» - PullRequest
Новая
       5

Визуализация списка в React и получение Eslint ошибки «нет неиспользованных выражений»

0 голосов
/ 30 ноября 2018

Я перезагружаю eslint и делаю тестовый конфиг для приложения создания реакции, а также в том числе и для форматирования.Состояние ошибки Не удалось скомпилировать: «Ожидался вызов присваивания или функции и вместо этого было обнаружено выражение no-unused-expressionions».Я пошел к документам eslint https://eslint.org/docs/rules/no-unused-expressions и добавил «разрешает» в раздел правил.Как это исправить, и может ли это быть более симпатичным конфликтом форматирования с eslint?

Ошибка указывает на строку, где начинается элемент списка.

<div>
    <ul>
      {this.state.list.map((item, index) => {
        <li key={index}>
          {item}
          <button
            type="button"
            onClick={() => {
              this.onRemoveItem(index);
            }}>
            Remove
          </button>
        </li>;
      })}
    </ul>
  </div>

Вот мой .eslintrc.json 

{
  "extends": ["prettier", "prettier/react"],
  "plugins": ["react", "jsx-a11y", "import", "prettier"],
  "rules": {
    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
    "prettier/prettier": "error",
    "arrow-body-style": ["warn", "always"],
    "allowShortCircuit": true,
    "allowTernary": true
  },
  "parser": "babel-eslint",
  "parserOptions": {
    "ecmaVersion": 6,
    "sourceType": "module",
    "ecmaFeatures": {
      "jsx": true,
      "modules": true
    }
  },

  "env": {
    "browser": true,
    "node": true,
    "es6": true,
    "node": true
  }
}

1 Ответ

0 голосов
/ 30 ноября 2018

Возвращаемое значение не используется, и, следовательно, выдается ошибка: 

<div>
    <ul>
      {this.state.list.map((item, index) => {
        return (
         <li key={index}>
          {item}
          <button
            type="button"
            onClick={() => {
              this.onRemoveItem(index);
            }}>
            Remove
          </button>
        </li>
       );
      })}
    </ul>
  </div>

Вы также можете использовать скобки для возврата объекта: 

<div>
    <ul>
      {this.state.list.map((item, index) => (
         <li key={index}>
          ...
        </li>
      ))}
    </ul>
  </div>

Или, даже если вы начнете <li>в той же строке вы можете избежать: 

{this.state.list.map((item, index) => <li key={index}>
   ...
  </li>
)}
...