只有在使用react引导时，才能在函数组件的主体内调用钩子。

Question

错误-只能在函数组件的主体内调用钩子。

我不能使用任何组件的反应-引导！

https://react-bootstrap.github.io/components/dropdowns/

我试着检查了以下内容：

1. npm ls react ->只有1个反应模块
2. 检查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>
 );
  }

Answer 1

终于找出原因了！

原因是我还没有安装-引导和引导！

解决方案：

npm安装反应-引导引导

Answer 2

  const sideItems = [
   {
        ...
      label: 'Test',
      icon: <CalendarTodayIcon />,
      path: '/event',
      exact: false,
      component: <Event/>, //<-- this needs to be passed as a component here, or later rendered as <component/>
    },
 ]