如何修复@typescript-eslint/no-misused-promises 错误

Question

我有一个用于 PrimaryButton class 的 onClick() 方法。我从 eslint 检查中得到了 @typescript-eslint/no-misused-promises 错误。 代码如下：

onClick = { () =>
    Utils.getName(a, b).then(
        (name) => {
            Utils.deleteThing(name, x, y);
        })
    }

我应该如何修复我的代码以避免此错误？ 感谢您的帮助。 谢谢！

更新：eslint配置如下

错误信息在 onClick() 行：

Answer 1

该错误指出预期返回无效。 但是，您返回的是 promise。

onClick = { () =>
    Utils.getName(a, b).then(
        (name) => {
            Utils.deleteThing(name, x, y);
        })
    }

你写箭头 function 的方式，你返回下面的代码（一个承诺）而不是运行它并且什么都不返回：

Utils.getName(a, b).then(
            (name) => {
                Utils.deleteThing(name, x, y);
            })

但是，如果您这样编写代码，则会返回 void 并实际运行代码：

onClick = { () => {
    Utils.getName(a, b).then(
        (name) => {
            Utils.deleteThing(name, x, y);
        })
    }
}

关键是箭头 function 是如何工作的。 如果您在=>之后省略了{ } ，则返回隐含为=>之后的单个语句，这不是您想要的。 您不想返回Utils.getName function，您只是想让它运行。 有关更多信息，请参见此处。