async 函数：提供给属性的承诺返回函数，其中预期返回 void

Question

我有一个异步函数，它将 auth 方法作为参数并将 auth 方法用作登录选项。

Sonarcloud 在 handleAuthorisationOnClick 函数上抛出以下错误

Promise-returning function provided to attribute where a void return was expected.

const handleAuthorisationOnClick = async (authMethod: string): Promise<void> => {

   loginWithRedirect({
      connection: authMethod,
      ...
    });
};

我将 handleAuthorisationOnClick 作为道具传递给模态组件 AuthorisationModal

<AuthorisationModal
          onAuthMethodSelected={handleAuthorisationOnClick} <----- Sonarcloud error
    ...

AuthorisationModal 通过 auth 方法映射并将 auth 方法作为参数传递给 onAuthMethodSelected

const AuthorisationModal = ({onAuthMethodSelected}) => (
          {methods.map((connectionName: string) => (
            <Button
              onClick={() => onAuthMethodSelected(connectionName)}
          
            >
              {methods.label}
            </Button>
          ))}
        ...

Answer 1

Sonarcloud 警告您一个潜在的错误：您正在传递一个函数，该函数返回一个承诺给调用该函数时不期望收到承诺的东西。这个警告很有用，因为它是一个常见的错误。当调用者不使用承诺时，最好不要将返回承诺的函数（包括

async

函数）作为回调传递。如果调用者不期望一个承诺，它就不会处理承诺拒绝，这可能会导致你的程序出现未处理的拒绝错误。

如果函数异步完成它的工作真的没问题，将它包装在一个非

async

函数中，will处理承诺拒绝（理想情况下通过向用户报告错误），并将那个函数传递给不期望处理承诺的代码。

包装纸的粗略草图：

const wrapper = () => {
    handleAuthorisationOnClick()
    .catch((error) => {
        // Report the error to the user
    });
};