React - 向预期返回 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，但没有一个能够解决错误。

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 文档