ESlint关于箭头函数返回值的问题

Question

以下是代码：

this.$refs['login-form'].validate((valid) => {
      if (!valid) return false;
      this.$store.dispatch('createToken', {
        username: this.model.username,
        password: this.model.password,
      })
      

ESlint报错：Expected to return a value at the end of arrow function.(consistent-return)

请问如何修改代码？

Answer 1

感觉是少了 一个 return，你试试下面的代码

this.$refs['login-form'].validate((valid) => {
    if (!valid) {
        return false;
    }
    this.$store.dispatch('createToken', {
        username: this.model.username,
        password: this.model.password,
    });
    
    return true;
});

Answer 2

接Anguer的回答，eslint的规则consistent-return默认要求箭头函数如果有写return的话，那么在最后必须要有一个return，并且不能是return; 尝试了一下return null;和return undefined;都是可以的。所以你在最后补一个return true就可以了。

Answer 3

this.$refs['login-form'].validate((valid) => {
    if (!valid) return false;
    this.$store.dispatch('createToken', {
        username: this.model.username,
        password: this.model.password,
    })
})

Answer 4

要求使用一致的 return 语句 (consistent-return)

不像静态类型语言强制要求函数返回一个指定类型的值，JavaScript 允许在一个函数中不同的代码路径返回不同类的值。

JavaScript 中令人感到困惑的一面是：在以下情况下函数返回 undefined ：

• 在退出之前没有执行 return 语句

• 执行 return 语句，但没有显式地指定一个值

• 执行 return undefined

• 执行 return void，其后跟着一个表达式 (例如，一个函数调用)

• 执行 return，其后跟着其它等于 undefined 的表达式

在一个函数中，如果任何代码路径显式的返回一个值，但一些代码路径不显式返回一个值，那么这种情况可能是个书写错误，尤其是在一个较大的函数里。例如下面的例子：

• 函数中的某个代码路径返回一个布尔值 true

• 另一个代码路径并不显式地返回一个值，因此隐式地返回 undefined

function doSomething(condition) {
    if (condition) {
        return true;
    } else {
        return;
    }
}

原文链接