Eslint错误-箭头体周围的意外块语句;将返回值立即移动到=>; [英] Eslint Error - Unexpected block statement surrounding arrow body; move the returned value immediately after the =>
本文介绍了Eslint错误-箭头体周围的意外块语句;将返回值立即移动到=>;的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我收到编译失败的错误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的devDependents
"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"
},
推荐答案
如果使用箭头函数,则在返回值时有两个语法选项:
- ()=>{退货}
- ()=>表达式
在第二种情况下,您只需编写自动返回的表达式。出现错误的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>
)
);
}
这篇关于Eslint错误-箭头体周围的意外块语句;将返回值立即移动到=>;的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文