Eslint Error - Неожиданный оператор блока, окружающий тело стрелки;переместить возвращаемое значение сразу после =>

Question

Я получаю сообщение об ошибке Не удалось скомпилировать Unexpected block statement surrounding arrow body; move the returned value immediately after the =>

Файл:

{
    this.state.items.map((item) => {
       return (
         <div key={item}>
             <a href={item.mainContact.phoneHref + item.mainContact.phone}>
                <i className="fa fa-phone" />
                <strong>{item.mainContact.phone}</strong>
              </a>
          </div>
        );
    })
}

Любой, кто мог бы помочь мне понять ошибку, которая была бы отличной.

Спасибо

Обновление

Мой файл .eslintrc.json:

{
  "env": {
    "browser": true,
    "jest": true
  },
  "extends": ["airbnb"],
  "parser": "babel-eslint",
  "rules": {
      "class-methods-use-this": 0,
      "react/jsx-filename-extension": [
          "error",
          {
            "extensions": [".js", ".jsx"]
          }
      ]
  }
}

Вот мои devDependencies из package.json

"devDependencies": {
  "babel-eslint": "^9.0.0",
  "babel-loader": "^8.0.2",
  "eslint": "^5.6.1",
  "eslint-config-airbnb": "^17.1.0",
  "eslint-loader": "^2.1.1",
  "eslint-plugin-import": "^2.14.0",
  "eslint-plugin-jsx-a11y": "^6.1.1",
  "eslint-plugin-react": "^7.11.1",
  "json-loader": "^0.5.7",
  "react-html-parser": "^2.0.2",
  "react-transition-group": "^2.4.0",
  "webpack-cli": "^3.1.1"
},

Answer 1

Если вы используете функции стрелок, у вас есть две опции синтаксиса при возврате значений:

1. () => {return somethinng}
2. () => выражение

Во втором случае вы просто пишете выражение, которое автоматически возвращается.Правило eslint , сообщающее об ошибке, говорит вам, что, если у вас есть только одно выражение, вы можете удалить фигурные скобки и вернуть выражение прямо так:

{
    this.state.items.map((item) => (
         <div key={item}>
             <a href={item.mainContact.phoneHref + item.mainContact.phone}>
                <i className="fa fa-phone" />
                <strong>{item.mainContact.phone}</strong>
              </a>
          </div>
        )
    );
}

Answer 2

вы используете предустановку airbnb eslint

, которая заставляет функции стрелок не использовать фигурные скобки, если вы просто возвращаете один объект.

Измените код на это, и он должен скомпилировать

this.state.items.map((item) => (<div key={item}>
     <a href={item.mainContact.phoneHref + item.mainContact.phone}>
        <i className="fa fa-phone" />
        <strong>{item.mainContact.phone}</strong>
      </a>
  </div>)
)

См. Документы по этому правилу

См. Где сконфигурировано репо airbnb