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

这个错误触发的原因是：React的onClick回调期望接收一个返回void的同步函数，但你的箭头函数隐式返回了Utils.getName().then()产生的Promise，违反了@typescript-eslint/no-misused-promises规则对"Promise误用"的检查。

以下是几种可行的修改方式：

方式一：显式返回void #

在箭头函数末尾添加return;，明确让函数返回void，消除隐式返回的Promise：

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

方式二：用void关键字吃掉Promise #

使用void运算符忽略Promise的返回值，确保箭头函数返回void：

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

方式三：改用async/await写法（需注意规则配置） #

如果更习惯async/await的风格，可以写成异步函数，此时需要确保规则允许事件处理函数返回Promise（或显式处理返回值）：

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

若使用此写法仍报错，可在ESLint配置中调整规则选项，允许事件处理函数返回Promise：

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

内容的提问来源于stack exchange，提问作者Tony