代码之家 › 专栏 › 技术社区 › roshambo

Eslint错误-箭头体周围出现意外的block语句;将返回值立即移动到=>

eslint reactjs

roshambo · 技术社区 · 7 年前

我得到了编译失败的错误 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>
        );
    })
}

任何能帮我理解错误的人都会很好。

更新

{
  "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": {
  "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"
},

2 回复 | 直到 7 年前

Simeon Stoykov 7 年前

如果使用箭头函数,则返回值时有两个语法选项:

()=>{返回somethinng}

()=>表达式

在第二种情况下,只需编写自动返回的表达式。这个 eslint rule 这个错误告诉您,如果只有一个表达式,可以删除大括号并直接返回表达式,如下所示:

{
    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>
        )
    );
}

akwasiijunior 6 年前

规则是,你可以去掉大括号和“return”围绕着你要返回的对象。但是,返回if语句需要大括号。

这是基于lint错误的问题的正确解决方案:

{
    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>
        )
    );
}

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

Gonzalo.- 7 年前

您使用的是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>)
)

See docs for that rule

See where is configured in the airbnb repo