无效的钩子调用。使用 useDispatch 时，只能在函数组件的主体内部调用钩子

Question

我正在使用 useDispatch 钩子，因此我收到了无效的钩子调用错误。请看一看，让我知道我哪里出错了。

export default function SocialLogin() {
  const dispatch = useDispatch();

  function handleSocialLogin(provider) {
    dispatch(closeModal());
    SocialLogin(provider);
  }

  return (
    <>
        <Button
            onClick={() => handleSocialLogin('facebook')}
            icon='facebook'
            fluid
            color='facebook'
            style={{ marginBottom: 10 }}
            content='Login with Facebook'
        />
        <Button
            onClick={() => handleSocialLogin('google')}
            icon='google'
            fluid
            color='google plus'
            content='Login with Google'
        />
    </>
  );
}

Answer 1

问题是 SocialLogin 是另一个为调用不同登录方法而编写的函数，并且由于当前函数的名称也是 SocialLogin，系统没有调用正确的函数