Question

我有这个代码：

    import { useState } from 'react';
    import {
        MDBNavbar, MDBNavbarBrand, MDBNavbarNav, MDBNavItem, MDBNavLink, MDBNavbarToggler, MDBCollapse, MDBFormInline
        } from "mdbreact";
    import { BrowserRouter as Router } from 'react-router-dom';
    import logo from '../static/logo.svg';
    import PersonIcon from '@material-ui/icons/Person';
    import PersonAddIcon from '@material-ui/icons/PersonAdd';
    import VpnKeyIcon from '@material-ui/icons/VpnKey';
    import ListIcon from '@material-ui/icons/List';
    import '../App.css';
    
    function Header() {
        
        const [ isOpen, setIsOpen ] = useState(false);
        
        const toggleCollapse = () => {
          setIsOpen(!isOpen);
        }
        
        return ( 
            <Router>
            <MDBNavbar color="indigo" dark expand="md">
              <MDBNavbarBrand>
                <strong className="white-text"> <img src={logo} className="App-logo" alt="logo" /> </strong>
              </MDBNavbarBrand>
              <MDBNavbarToggler onClick={toggleCollapse} />
              <MDBCollapse id="navbarCollapse3" isOpen={isOpen} navbar>
                <MDBNavbarNav left>
                  <MDBNavItem active>
                    <MDBNavLink to="/crearusuario"> <PersonAddIcon /> Agregar </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="cambiarcontrasena"> <VpnKeyIcon /> Cambiar Contraseña </MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to="/usuarios"> <ListIcon /> Usuarios </MDBNavLink>
                  </MDBNavItem>
                </MDBNavbarNav>
                <MDBNavbarNav right>
                  <MDBNavItem>
                    <MDBFormInline waves>
                      <div className="md-form my-0"> 
                          <PersonIcon />
                          <p className="mb-auto pl-2 font-weight-bold" > Administrador </p>
                      </div>
                    </MDBFormInline>
                  </MDBNavItem>
                </MDBNavbarNav>
              </MDBCollapse>
            </MDBNavbar> 
            </Router>
          );
    }

export default Header;

但是我遇到了这个错误： react.development.js:1476 未捕获的错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一造成的：

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用中拥有多个 React 副本

我已经检查了很长时间，但我找不到一些错误，我做错了什么？？

这里在代码和框 Proyect

Answer 1

从以下地址复制解决方案：React - Error: Invalid hook call. Hooks can only be called inside of the body of a function component

我们在使用 mdbootstrap Library MDBNavLink 组件时似乎存在某种问题。不过，我并没有深入研究以解释原因。

我通过从 react-router-dom 导入 Link 组件解决了这个问题，并将其与 className='nav-link' 一起使用。

import { Link } from "react-router-dom";

//Snippet
// [....]

<MDBNavItem>
  <Link
    className='nav-link'
    exact
    to='/'
    onClick={closeCollapse('mainNavbarCollapse')}
    >
    Home
  </Link>
</MDBNavItem>

// [...]

React JS 未捕获错误：无效的钩子调用

1 个答案: