在前端开发中，编写高质量的代码非常重要，ESLint是一个非常好用的代码检查工具，可以帮助我们发现代码中潜在的问题并指出改进方案。但是有时候我们在使用ESLint的过程中，会遇到一些报错，比如'Unexpected block statemente surrounding arrow body'，这篇文章将向大家介绍如何解决这个问题。
什么是 'Unexpected block statemente surrounding arrow body'
这个报错的意思是在箭头函数中，发现了多余的代码块（block statement）。箭头函数是ES6中的一种语法，通常用来代替函数表达式或匿名函数，可以大大简化代码，提高可读性。在箭头函数中，只需要把需要执行的代码放在箭头的后面，并用逗号分隔即可，不需要加上花括号或者return语句。
比如下面这个函数：
const add = (a, b) => {
return a + b
}可以简化为：
const add = (a, b) => a + b
但是如果在箭头函数中加入了花括号，就会出现'Unexpected block statemente surrounding arrow body'的报错：
const add = (a, b) => {
return a + b
};解决方法
解决这个问题非常简单，只需要把多余的花括号移除即可。如果需要在箭头函数中写多行代码，可以使用换行符和空格来提高可读性，比如：
const sum = (a, b, c) => ( a + b + c )
示例代码
下面我们来看一个完整的示例代码，演示如何使用箭头函数：
-- -------------------- ---- -------
------ ----- ---- -------
----- --------- - -- -- -
----- ------- --------- - -----------------
----- -------------- - -- -- -------------- - --
------ -
-----
------ ------- ------- ---------
------- ------------------------------ -----------
------
-
-
------ ------- ---------这段代码使用了React的useState钩子，以及箭头函数来处理点击事件的逻辑。通过这个例子，大家可以更好地理解箭头函数的用法以及如何避免'Unexpected block statemente surrounding arrow body'的报错。
总结
ESLint是前端开发中非常常用的代码检查工具，学会如何解决ESLint报错可以让我们编写高质量的代码。希望本篇文章对大家有所帮助，有关ESLint更多的细节和用法大家可以去官网文档中查看。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64799c33968c7c53b0598ca5