箭头主体周围的意外块语句

Question

这可能是微不足道的，但我花了异常多的时间试图弄清楚为什么下面的代码会出现此 "Unexpected block statement surrounding arrow body " 错误

computed: {
  filteredItems() {
    return this.items.filter((item) => {
      return (item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1);
    });
  },
},

Answer 1

如果在箭头函数中你所做的只是return，那么你可以执行以下操作：

const someFunction = item => item.someReturnValue;

因此，在您的情况下，它要求您执行以下操作：

return this.items.filter((item) => (item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1);

正如您在我的第一个示例中看到的，如果只需要一个参数，您也可以去掉参数周围的括号。

如果您想查看更多示例，可以查看 MDN Arrow Functions page.

Answer 2

这基于您的 ESLint 配置。因此，由于箭头函数确实隐式 return，因此您的代码不需要 return 语句。

箭头函数后面的左大括号立即表示一个新的块，它应该不止一个句子，但在你自己的情况下不是这样。

// Fix for your code

computed: {
  filteredItems() {
   return this.items.filter((item) => 
   (item.type.toLowerCase().indexOf(this.search.toLowerCase()) > -1));
  }
},

箭头主体周围的意外块语句

Unexpected block statement surrounding arrow body

javascript

ecmascript-6

eslint

vuejs2