Question

我正在做一个React + Electron应用程序，但出现此错误：

错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。可能由于以下原因之一而发生： 1.您的React和渲染器版本可能不匹配（例如React DOM） 2.您可能违反了《钩子规则》 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;

足够了！

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

1 个答案: