Question

我在反应中开发了Google登录。要了解如何实现signIn并学习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() {
  const {login} = useGLogIn(this.props)
}

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

谢谢。对所有人

Answer 1

反应挂钩只能在功能组件内使用（不能在扩展React.Component的组件内使用）

您要么需要使用login方法将组件更改为功能组件，要么不使用钩子

资源

Using the state hook

Answer 2

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

通常，hook是一个函数，因此您应该能够在大多数函数情况下对其进行定义（您的用法正确）。但是，如果需要调用它，我相信它必须在react函数组件的范围之内。 https://reactjs.org/docs/components-and-props.html

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

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

ReactJS错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用

2 个答案: