ReactJS 错误：无效的钩子调用。 Hooks 只能在函数组件的主体内部调用答案

【问题标题】：ReactJS Error: Invalid hook call. Hooks can only be called inside of the body of a function componentReactJS 错误：无效的钩子调用。 Hooks 只能在函数组件的主体内部调用
【发布时间】：2020-05-13 23:37:16
【问题描述】：

我开发了谷歌登录反应。了解如何实现登录和学习 reactjs 的任何概念。
我得到 \\\/// 错误：

import {useState, useCallback} from 'react'

export const useGLogIn = props => {
  const [isLoggedIn, setLogIn] = useState(false)

  const login = useCallback(async ({
    onSuccess, onFailure, onFinish
  }) => {
    console.log(onSuccess, onFailure, onFinish);
  }, [])

  return {login}
}

这是错误？

我使用 React.Component 并在方法 login 中调用 hook，当我单击 Button 时调用该方法

login() {
  const {login} = useGLogIn(this.props)
}

<button onClick={this.login}>Login With Google </button>

谢谢。给大家

【问题讨论】：

login 不是函数组件。你能分享你有button元素的组件吗？
看起来您正在尝试在类组件中使用挂钩（基于您对this.login 的使用）。正如错误所述，这是不允许的。如果您想使用钩子，您唯一的选择是将类组件转换为功能组件。

标签： reactjs

【解决方案1】：

React Hooks 只能在功能组件中使用（不能用于扩展 React.Component 的组件）

您要么需要将带有登录方法的组件更改为功能组件，要么不使用钩子

资源

Using the state hook

【讨论】：

【解决方案2】：

这里有关于这个错误的文档，https://reactjs.org/warnings/invalid-hook-call-warning.html

一般来说，hook 是一个函数，所以你应该能够像在大多数函数情况下一样定义它（你的用法是正确的）。但是，如果需要调用它，我相信它需要在反应函数组件的范围内。 https://reactjs.org/docs/components-and-props.html

hook 的想法对我来说就像是trait，方便你调用 react 组件方法。这意味着，如果在 react 组件的范围之外声明，钩子几乎是无用的。

为了测试您的自定义钩子，您可以将其嵌入到函数组件中，也可以使用某个库https://github.com/testing-library/react-hooks-testing-library。

【讨论】：