当我在应用程序中使用材料设计引导组件时,在Reaction中遇到无效的钩子调用错误 [英] Getting invalid hook call error in React when I used materidal design bootstrap component in my application
本文介绍了当我在应用程序中使用材料设计引导组件时,在Reaction中遇到无效的钩子调用错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
当我在应用程序中使用材料设计引导组件时,在Reaction中出现无效钩子调用错误
错误:挂钩调用无效。只能在函数组件的主体内部调用挂钩。这可能是由于以下原因之一:- 您的Reaction和呈现器的版本可能不匹配(如Reaction DOM)
- 您可能违反了钩子规则
- 您可能在同一应用程序中有多个Reaction副本
这是我的页眉组件
import React, { useState } from "react";
import {
MDBNavbar,
MDBNavbarBrand,
MDBNavbarNav,
MDBNavItem,
MDBNavLink,
MDBNavbarToggler,
MDBCollapse,
MDBFormInline,
MDBDropdown,
MDBDropdownToggle,
MDBDropdownMenu,
MDBDropdownItem,
} from "mdbreact";
const Header = () => {
return (
<>
<MDBNavbar color="indigo" dark expand="md">
<MDBNavbarBrand>
<strong className="white-text">Navbar</strong>
</MDBNavbarBrand>
<MDBNavbarToggler />
<MDBCollapse id="navbarCollapse3" navbar>
<MDBNavbarNav left>
<MDBNavItem active>
<MDBNavLink to="#!">Home</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">Features</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBNavLink to="#!">Pricing</MDBNavLink>
</MDBNavItem>
<MDBNavItem>
<MDBDropdown>
<MDBDropdownToggle nav caret>
<span className="mr-2">Dropdown</span>
</MDBDropdownToggle>
<MDBDropdownMenu>
<MDBDropdownItem href="#!">Action</MDBDropdownItem>
<MDBDropdownItem href="#!">Another Action</MDBDropdownItem>
<MDBDropdownItem href="#!">
Something else here
</MDBDropdownItem>
<MDBDropdownItem href="#!">
Something else here
</MDBDropdownItem>
</MDBDropdownMenu>
</MDBDropdown>
</MDBNavItem>
</MDBNavbarNav>
<MDBNavbarNav right>
<MDBNavItem>
<MDBFormInline waves>
<div className="md-form my-0">
<input
className="form-control mr-sm-2"
type="text"
placeholder="Search"
aria-label="Search"
/>
</div>
</MDBFormInline>
</MDBNavItem>
</MDBNavbarNav>
</MDBCollapse>
</MDBNavbar>
</>
);
};
export default Header;
App.js
import logo from './logo.svg';
import './App.css';
import Header from './components/Header';
function App() {
return (
<div className="App">
<Header />
</div>
);
}
export default App;
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import '@fortawesome/fontawesome-free/css/all.min.css';
import'bootstrap-css-only/css/bootstrap.min.css';
import'mdbreact/dist/css/mdb.css';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
reportWebVitals();
推荐答案
在您的组件中,它们是导航链接,需要位于<Router>
组件内部,如文档所示。
import { BrowserRouter as Router } from "react-router-dom";
import React, { useState } from "react";
const Header = () => {
return (
<>
<Router>
<MDBNavbar color="indigo" dark expand="md">
.
.
.
</MDBNavbar>
</Router>
</>
);
};
这篇关于当我在应用程序中使用材料设计引导组件时,在Reaction中遇到无效的钩子调用错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文