错误 无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

Posted 2023-02-22

【中文标题】错误 无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用

【英文标题】：Error Invalid hook call. Hooks can only be called inside of the body of a function component

【发布时间】：2020-07-22 18:39:47

【问题描述】：

我正在做一个 React + Electron 应用程序，我收到了这个错误：

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。这可能由于以下原因之一而发生： 1. React 和渲染器的版本可能不匹配（例如 React DOM） 2. 你可能违反了 Hooks 规则 3. 你可能在同一个应用中拥有多个 React 副本

但是我的类已经是一个函数组件（我用这篇文章作为参考Invalid hook call. Hooks can only be called inside of the body of a function component）：

import React, useState from 'react'
import   HashRouter, Route, Link  from 'react-router-dom';
import  AppBar  from '@material-ui/core';

import Login from './loginView/Login.jsx';
import vendaView from './vendaView/TelaDeVenda.jsx';
import relatorioView from './relatorioView/Relatorio.jsx';
import estoqueView from './estoqueView/Estoque.jsx';
import configuracoesView from './configuracoesView/Configuracoes.jsx'
import cargosView from './cargosView/Cargos.jsx';
import historicoView from './historicoView/HistoricoDeVendas.jsx';

const Index = () => 
    const [esta_logado, setLogado] = useState(0);
    const [usuario, setUsuario] = useState();


    function liberarLogin(usuario) 
        setLogado(1);
        setUsuario(usuario)
    

    function deslogar(usuario) 
        setLogado(0);
        setUsuario(usuario)
    

        return (
            <div>
                
                    !esta_logado ?  
                        (<Login liberarLogin = liberarLogin />) :
                           (<AppBar position="static">
                                <HashRouter>
                                    <Link to='/vendaView'>Caixa</Link> <br/>
                                    <Link to='/relatorioView'>Relatorio</Link> <br/>
                                    <Link to='/estoqueView'>Estoque</Link> <br/>
                                    <Link to='/configuracoesView'>Configuracoes</Link> <br/>
                                    <Link to='/cargosView'>Cargos</Link> <br/>
                                    <Link to='/historicoView'>Histórico de Vendas</Link> <br/>
                                    <button onClick=deslogar>Sair</button>

                                    <hr></hr>
                                    <Route path='/vendaView' component=vendaView/>
                                    <Route path='/relatorioView' component=relatorioView/>
                                    <Route path='/estoqueView' component=estoqueView/>
                                    <Route path='/configuracoesView' component=configuracoesView/>
                                    <Route path='/cargosView' component=cargosView/>
                                    <Route path='/historicoView' component=historicoView/>
                                </HashRouter> 
                            </AppBar>)
                      
            </div>             
        )

;

export default Index;

当我删除 <AppBar position="static"> 和 </AppBar> 时，错误停止... 我究竟做错了什么？ ERROR MESSAGE

【问题讨论】：

查看错误的堆栈跟踪并找出它抱怨的钩子调用。除非您在某处完成了Index() 而不是<Index />，否则这不是问题所在。

这是真的。但它没有显示我的代码中的错误在哪里，它只是说“ in WithStyles(ForwardRef(AppBar)) (created by Index) in Index ”。我只是用错误消息的打印更新帖子

您是否消除了 react 和 react-dom 之间版本不匹配的可能性，或者 @material-ui/core 使用与应用程序其余部分不同的 react 版本的可能性？

我认为这一切都很好。 Material-ui/core: "@material-ui/core": "^4.0.0-rc.0" React: "react": "^16.13.1" 一切正常 material-ui.com/pt/guides/migration-v3

github 上标记为4.0.0-rc.0 的源与堆栈跟踪中的行号不一致。您能否确认实际安装了 @material-ui/core 的哪个版本？ ^4.0.0-rc.0 不是一个版本，它是一个 semver 范围。

【参考方案1】：

解决了！ 我将签名从const Index = () => 更改为export default function Index() 并删除export default Index;

这就够了！

【讨论】：

有趣...我个人不相信这是真正的问题。如果将其更改为 export default () => 会发生什么？又出错了吗？

如果是可能的原因，错误消息应该确实添加了这个可能的原因。你猜到了真是个奇迹。无论如何，这并没有解决我的问题。