Question

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

您的 React 和渲染器版本可能不匹配（例如 React DOM）
你可能违反了钩子规则
您可能在同一个应用中拥有多个 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;

Answer 1

我们在使用 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>

// [...]

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

1 个答案: