ESLint 报告“为预期返回 void 的属性提供了承诺返回函数”

Question

我有一个 React 应用程序出现 linting 错误：

Promise-returning function provided to attribute
where a void return was expected
.eslint@typescript-eslint/no-misused-promises

函数看起来像这样

      <Button onClick={
        async () => {
          await handleDelete()
        }}
      >

我尝试添加

return void

以及多种不同的方法来包装代码并按照各种 SO 帖子中的建议添加 catch，但没有一个能够解决错误。

我不想在不了解原因的情况下禁用该规则 - 一旦我这样做，可能会在 lint 配置中删除或禁用该规则。

Answer 1

这里有两种方法：

1. 您可以将函数包装在 IIFE（立即调用函数表达式），

     <Button onClick={
         () => {
             void (async () => {
                 await handleDelete()
             })();
          }
      }>

您可以了解更多关于 IIFE 的信息：MDN 官方文档

2. 或者，您可以禁用

   no-misused-promises

   规则。

对于项目范围，在

.eslintrc

中添加规则：

{
  "@typescript-eslint/no-misused-promises": [
    "error",
    {
      "checksVoidReturn": false
    }
  ]
}

要禁用此内联功能，请在特定事件上方注释以忽略该错误。

// eslint-disable-next-line @typescript-eslint/no-misused-promises

您可以在以下位置阅读更多信息：GitHub ESLint 文档

Answer 2

在这种特殊情况下，您可以安全地跳过使用

async

，因为不需要

handleDelete

结果或异步流控制

      <Button onClick={
        () => {
          handleDelete()
        }}
      >

在其他场景中，

no-misused-promises

规则的文档建议了两种方法：

• 使用异步 IIFE 包装器

      <Button onClick={
        () => {
          void (async () => {
            await handleDelete();
          })();
        }}
      >

• 命名异步包装器以便稍后调用它

      <Button onClick={
        () => {
          const handle = async () => {
            await handleDelete()
          }
          handle()
        }}
      >

参考：https://typescript-eslint.io/rules/no-misused-promises/#checksvoidreturn