Реакция - ошибка: недопустимый вызов перехвата. Перехваты могут вызываться только внутри тела функционального компонента

#javascript #reactjs #react-hooks #react-bootstrap

#javascript #reactjs #реагирующие перехваты #реакция-bootstrap

Вопрос:

Я хотел использовать «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;

1. Я не вижу никаких вызовов перехвата в вашем опубликованном коде. Хотя очевидная проблема заключается в том, что вы используете компоненты класса вместо компонентов функции.

2. Интересно, я только что скопировал код с сайта

3. Может быть проблема с самой библиотекой или несоответствующими версиями в графе переходных зависимостей. Это не то, с чем мы можем помочь.

Ответ №1:

Кажется, есть какая-то проблема, когда мы используем компонент mdbootstrap библиотеки MDBNavLink. Однако я не стал углубляться в это, чтобы объяснить, почему.

Я решил эту проблему, импортировав компонент Link из react-router-dom и используя его вместо className=’nav-link’ .

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

//Snippet
// [....]

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

// [...]