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

【问题标题】：Invalid hook call. Hooks can only be called inside of the body of a function component while using useDispatch无效的挂钩调用。使用 useDispatch 时，只能在函数组件的主体内部调用 Hooks
【发布时间】：2021-03-31 22:25:46
【问题描述】：

我正在使用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'
        />
    </>
  );
}

【问题讨论】：

看看这个：react-redux.js.org/api/hooks 除了组件函数之外，你不能在函数内部使用 dispatch(closeModal())。你应该用 useCallback() 包围它。
handleSocialLogin 中的SocialLogin(provider) 是什么？ “SocialLogin”与当前功能组件的名称重叠，所以我认为这可能是问题所在。

标签： reactjs react-hooks

【解决方案1】：

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

【讨论】：