反应 - 错误:无效的钩子调用.Hooks 只能在函数组件内部调用 [英] React - Error: Invalid hook call. Hooks can only be called inside of the body of a function component

问题描述

我想使用 React Bootstrap 汉堡菜单" HamburgerMenu 从那里复制了代码，我收到一个错误 errorScreen"错误:无效的钩子调用.钩子只能在函数组件的主体内部调用.这可能是由于以下原因之一造成的:

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

Mobile_Navbar.jsx

import React, { Component } from 'react';进口 {MDBN导航栏，MDBNavbar品牌，MDBNavbarNav,MDBNavItem，MDBNavLink，MDBNavbarToggler，MDB收起，MDB容器来自'mdbreact';import { BrowserRouter as Router } from 'react-router-dom';类测试扩展组件{状态 = {折叠ID:''};切换折叠 = 折叠 ID =>() =>{this.setState(prevState => ({collapseID: prevState.collapseID !== collapseID ?折叠ID:''}));};使成为() {返回 (<路由器><MDBContainer><MDBN导航栏颜色='淡蓝色变亮-4'style={{ marginTop: '20px' }}光><MDBContainer><MDBNavbarBrand>导航栏</MDBNavbarBrand><MDBNavbarToggleronClick={this.toggleCollapse('navbarCollapse1')}/><MDB收起id='navbarCollapse1'isOpen={this.state.collapseID}导航栏><MDBNavbarNav left><MDBNavItem active><MDBNavLink to='#!'>首页</MDBNavLink></MDBNavItem><MDBNavItem><MDBNavLink to='#!'>Link</MDBNavLink></MDBNavItem><MDBNavItem><MDBNavLink to='#!'>个人资料</MDBNavLink></MDBNavItem></MDBNavbarNav></MDBCollapse></MDBContainer></MDBNavbar></MDBContainer></路由器>);}}导出默认测试；

App.js

从'react'导入React；导入'./App.css';从'./components/Mobile_Menu/Mobile_Navbar'导入测试；功能应用程序(道具){返回 (
<测试/>
);}导出默认应用程序；

解决方案

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

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

import { Link } from react-router-dom";//代码段//[....]<MDBNavItem><链接className='导航链接'精确的到='/'onClick={closeCollapse('mainNavbarCollapse')}>家</链接></MDBNavItem>//[...]

I wanted to use "React Bootstrap Hamburger Menu" HamburgerMenu copied the code from there and I get an error errorScreen "Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem. "Here is my code

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;

解决方案

It seems there is some kind of problem when we use the mdbootstrap Library MDBNavLink component. I didn't go deep on that to be able to explain why, though.

I solved this problem by importing the Link component from react-router-dom and use it instead with the className='nav-link'.

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

//Snippet
// [....]

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

// [...]

这篇关于反应 - 错误:无效的钩子调用.Hooks 只能在函数组件内部调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！