如何解决在使用react-bootstrap时,只能在函数组件的主体内部调用钩子
错误-只能在函数组件的主体内部调用挂钩。
我不能使用react-bootstrap的任何组件!
https://react-bootstrap.github.io/components/dropdowns/
我尝试检查以下内容:
- npm ls react->仅1个react模块
- 检查package.json->相同版本的react和react-dom模块
package.json
"dependencies": {
"react": "^16.13.1","react-beautiful-dnd": "^13.0.0","react-calendar": "^3.1.0","react-dom": "^16.13.1","react-download-link": "^2.3.0","react-dropzone": "^10.2.2","react-dropzone-uploader": "^2.11.0","react-file-download": "^0.3.5","react-json-view": "^1.19.1","react-loader-spinner": "^3.1.14","react-redux": "^7.1.0-rc.1","react-router-dom": "^5.2.0","react-scripts": "3.4.0","react-search-box": "^2.0.2","react-window": "^1.8.5","redux-thunk": "^2.3.0",},
Event.js
import React,{ useState,useEffect,useRef,useCallback } from 'react';
import Calendar from 'react-calendar'
import 'react-calendar/dist/Calendar.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Dropdown from 'react-bootstrap/Dropdown'
function Event() {
const [selectedDate,setSelectedDate] = useState(new Date());
useEffect(() => {
console.log(selectedDate)
},[selectedDate]);
return (
<div>
<Dropdown>
<Dropdown.Toggle variant="success" id="dropdown-basic">
Dropdown Button
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item href="#/action-1">Action</Dropdown.Item>
<Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
<Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
)
}
export default Event
更新:我添加了App.js供您参考。
我使用路线前往事件部分
App.js
const sideItems = [
{
...
label: 'Test',icon: <CalendarTodayIcon />,path: '/event',exact: false,component: Event,]
const accountItems = [
{
label: 'Account',icon: <AccountBoxIcon />,path: '/account',];
function App() {
return (
<Provider store={store}>
<BrowserRouter>
<Switch>
<Route path='/login' exact component={Login} />
<Route path='/' render={() => <Main sideItems={sideItems} accountItems={accountItems} />} />
</Switch>
</BrowserRouter>
</Provider>
);
}
解决方法
Console.prototype.log = function(text) {
// your code
};
,
最后找出原因!
原因是我还没有安装react-bootstrap和bootstrap!
解决方案:
npm install react-bootstrap引导程序
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。