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

Question

我正在做一个 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

Answer 1

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

这就够了！