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

Posted 2023-03-10

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

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

【发布时间】：2021-03-30 17:55:03

【问题描述】：

我想使用 "React Bootstrap Hamburger Menu" HamburgerMenu 从那里复制代码，我收到错误 errorScreen "错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能由于以下原因之一发生：

您可能有不匹配的 React 版本和渲染器（例如 React DOM） 您可能违反了 Hooks 规则 您可能在同一个应用程序中拥有多个 React 副本 有关如何调试和修复此问题的提示，请参阅 https://reactjs.org/link/invalid-hook-call。 "这是我的代码

Mobile_Navbar.jsx

import React,  Component  from 'react';
import 
  MDBNavbar,
  MDBNavbarBrand,
  MDBNavbarNav,
  MDBNavItem,
  MDBNavLink,
  MDBNavbarToggler,
  MDBCollapse,
  MDBContainer
 from 'mdbreact';
import  BrowserRouter as Router  from 'react-router-dom';

class Test extends Component 
  state = 
    collapseID: ''
  ;

  toggleCollapse = collapseID => () => 
    this.setState(prevState => (
      collapseID: prevState.collapseID !== collapseID ? collapseID : ''
    ));
  ;

  render() 
    return (
      <Router>
        <MDBContainer>
          <MDBNavbar
            color='light-blue lighten-4'
            style= marginTop: '20px' 
            light
          >
            <MDBContainer>
              <MDBNavbarBrand>Navbar</MDBNavbarBrand>
              <MDBNavbarToggler
                onClick=this.toggleCollapse('navbarCollapse1')
              />
              <MDBCollapse
                id='navbarCollapse1'
                isOpen=this.state.collapseID
                navbar
              >
                <MDBNavbarNav left>
                  <MDBNavItem active>
                    <MDBNavLink to='#!'>Home</MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to='#!'>Link</MDBNavLink>
                  </MDBNavItem>
                  <MDBNavItem>
                    <MDBNavLink to='#!'>Profile</MDBNavLink>
                  </MDBNavItem>
                </MDBNavbarNav>
              </MDBCollapse>
            </MDBContainer>
          </MDBNavbar>
        </MDBContainer>
      </Router>
    );
  


export default Test;

App.js

import React from 'react';
import './App.css';
import Test from './components/Mobile_Menu/Mobile_Navbar';

function App(props) 
    return (
        <div className="App">
            <Test />
        </div>
    );


export default App;

【问题讨论】：

我在您发布的代码中没有看到任何挂钩调用。尽管一个明显的问题是您使用的是类组件而不是函数组件。

有趣，我只是从网站上复制代码

可能是库本身的问题，或者传递依赖图中的版本不匹配。我们无法提供帮助。

【参考方案1】：

当我们使用 mdbootstrap 库 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>

// [...]