PrimeReact Button onClick使用异步回调触发ESLint错误的解决方案咨询

嘿，这个问题我之前在开发PrimeReact项目时也碰到过，刚好可以给你讲讲怎么解决～

你遇到的ESLint错误Promise-returning function provided to attribute where a void return was expected，本质原因是：PrimeReact Button的onClick属性期望接收一个返回值为void的函数，但你的exportCSV是async函数，调用后会返回一个Promise，这就和onClick的类型要求冲突了，所以ESLint会抛出警告。

下面给你几个可行的解决办法，按推荐程度排序：

方法一：用void关键字忽略Promise返回值 #

这是最简洁也最符合TS规范的写法，通过void明确告诉TypeScript我们不需要这个异步函数返回的Promise，让整个回调函数的返回值变成void：

<Button
  type="button"
  icon="pi pi-file"
  rounded
  onClick={() => void exportCSV(false)}
  data-pr-tooltip="CSV"
/>

方法二：在回调内部执行异步函数，不返回它 #

你也可以把异步函数的调用放在一个普通的匿名函数里，不返回这个Promise，这样外层函数的返回值自然就是void了：

<Button
  type="button"
  icon="pi pi-file"
  rounded
  onClick={() => {
    // 只执行函数，不返回Promise
    exportCSV(false);
  }}
  data-pr-tooltip="CSV"
/>

不过要注意，如果你项目里的ESLint规则比较严格，可能还是会提示你“未处理的Promise”，但你的exportCSV内部已经用try/catch处理了错误，所以这个写法也是安全的。

方法三：调整ESLint规则（不推荐） #

如果你确定这个场景不会有问题，也可以修改ESLint的配置，放宽对事件处理属性的检查：

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

不过一般不建议这么做，因为这个规则的存在是为了帮你避免潜在的未处理Promise错误，从代码层面解决会更稳妥。

另外，你的exportCSV已经用useCallback包裹，并且内部处理了错误捕获，所以用前两种方法都可以放心使用～

备注：内容来源于stack exchange，提问作者Papp Zoltán