无效的挂钩调用.使用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，因此系统没有调用正确的函数