使用typescript时，react-google-login中的注销挂钩出现问题

Question

我对onLogoutSuccess有问题：

 const onLogoutSuccess = (res: any) =>{
    alert('Logout successfully');
  }

const { signOut } = useGoogleLogout({
    clientId,
    onLogoutSuccess,
    onFailure
  })

我得到了错误：

(property) UseGoogleLogoutProps.onLogoutSuccess?: (() => void) | undefined
Type '(res: any) => void' is not assignable to type '() => void'.ts(2322)
index.d.ts(136, 12): The expected type comes from property 'onLogoutSuccess' which is declared here on type 'UseGoogleLogoutProps'

Answer 1

export interface GoogleLogoutProps {
  readonly clientId: string,
  readonly onLogoutSuccess?: () => void;
  readonly onFailure?: () => void;
  ....
}

你会得到这个错误，因为onLogoutSuccess钩子没有参数。在本例中，使用传入的res:any。

你可以像这样使用它，并且你不会得到那个错误。

  const onLogoutSuccess = () => {
    console.log("logout success");
  }

  const onFailure = () => {
    console.log("logout failure");
  }

Answer 2

我已经解决了这个问题，请看一下，希望对你的目标有所帮助。

JS代码

const onLogoutSuccess = () => {
    console.log('logout');
    history.push('/');
  };
  const onFailure = () => {
    console.log('logout fail');
  };
  const { signOut } = useGoogleLogout({
    clientId: GOOGLE_CLIENT_ID,
    onLogoutSuccess: onLogoutSuccess,
    onFailure: onFailure,
  });

Html

 <button onClick={signOut}>Log Out</button>