Eslint 错误 - 围绕箭头主体的意外块语句；在 => 之后立即移动返回值

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"]
          }
      ]
  }
}

这是我来自 package.json 的 devDependencies

"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. () => { 返回一些东西 }
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

只需删除return()函数并将整个块放入这样的函数中

{
    this.state.items.map((item) => (
         <div key={item}>DATA</div>
    )
}

以下是其工作原理的示例：

() => { return <div key={item}>DATA</div>}

所以删除我们的返回函数后它会像这样工作

() => (<div key={item}>DATA</div>)

或者

() => yourState

Answer 3

您正在使用爱彼迎 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 存储库中的配置位置

Answer 4

添加以下代码：

"arrow-body-style": "off"