Reactjs Eslint错误-围绕箭头体的意外块语句；将返回的值立即移动到=>；

我得到的错误是编译

围绕箭头体的意外块语句失败；在=>

文件：

这是我在package.json中的devdependency

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

---

您正在使用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>)
)

this.state.items.map（（item）=>(
)
)

---

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

（）=>{returnsomethinng}

（）=>表达式

在第二种情况下，您只需编写自动返回的表达式。给出错误的代码告诉您，如果只有一个表达式，则可以删除大括号并直接返回表达式，如下所示：

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

规则是说，你可以去掉大括号以及你要返回的圆括号周围的“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语句的示例：

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

{
this.state.items.map（（item）=>{
如果（！item.main contact.phone）{
返回(
不适用
)
}
返回(
);
})
}

请向我们展示您的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>
        )
    );
}

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