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

【问题标题】：React - Error: Invalid hook call. Hooks can only be called inside of the body of a function componentReact - 错误：无效的钩子调用。 Hooks 只能在函数组件的主体内部调用
【发布时间】：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;

【问题讨论】：

我在您发布的代码中没有看到任何挂钩调用。尽管一个明显的问题是您使用的是类组件而不是函数组件。
有趣，我只是从网站上复制代码
可能是库本身的问题，或者传递依赖图中的版本不匹配。我们无法提供帮助。

标签： javascript reactjs react-hooks react-bootstrap

【解决方案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>

// [...]

【讨论】：