為什么我不能從這個功能組件呼叫React鉤子？

我正在嘗試使用注銷選項實作導航欄。

這是我的功能組件的代碼：

import React, { useState } from 'react';
import { Nav, NavDropdown } from 'react-bootstrap';
import { useSelector, useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';

function MainMenu(props) {
    const user = useSelector(state => state.user);
    const dispatch = useDispatch();
    const navigate = useNavigate();
    
    const handleLogout = () => {
        dispatch({
            type: 'user/logout'            
        });
        navigate('/home');
    };

    const logedInMenu = (<NavDropdown title={user.name} id="basic-nav-dropdown">
        <NavDropdown.Item href="/dashboard">Dashboard</NavDropdown.Item>
        <NavDropdown.Item href="/upload">Upload new Meme</NavDropdown.Item>
        <NavDropdown.Divider />
        <NavDropdown.Item href="#" onClick={handleLogout}>Logout</NavDropdown.Item>
    </NavDropdown>);

    const publicMenu = (<Nav className='me-auto'>
        <Nav.Link href="/login">Login</Nav.Link>
        <Nav.Link href="/signup">Signup</Nav.Link>
    </Nav>);

    return (user ? logedInMenu : publicMenu);
}

export default MainMenu;

我遇到的問題是，當我嘗試使用此組件時：

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { BrowserRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom'
import Home from './Home';
import About from './About';
import Contact from './Contact';
import Login from './Login';
import Signup from './Signup';
import Dashboard from './Dashboard';
import Upload from './Upload';
import { getUser, removeUserSession } from './Utils/Common';
import MainMenu from './MainMenu';
import { Navbar, Container, Nav } from 'react-bootstrap';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
const mainMenu = MainMenu();
const user = getUser();

const userReducer = (state, action) => {
    switch (action.type) {
        case 'user/login':
            return {
                user: action.payload.user,
                token: action.payload.token
            }
        case 'user/logout':
            return {
                user: null,
                token: null
            }
        default:
            return {
                user: null,
                token: null
            }
    }
};

let store = createStore(userReducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());
const routing = (
    <Provider store={store}>
        <Navbar bg="light" expand="lg">
            <Container>
                <Navbar.Brand href="#home">Leeway Academy</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        <Nav.Link href="/">Home</Nav.Link>
                        {mainMenu}
                    </Nav>
                </Navbar.Collapse>
            </Container>
        </Navbar>
        <BrowserRouter>
            <div>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                    <Route path="/contact" element={<Contact />} />
                    <Route path="/login" element={<Login />} />
                    <Route path="/signup" element={<Signup />} />
                    <Route path="/dashboard" element={
                        <RequireAuth redirectTo="/login">
                            <Dashboard />
                        </RequireAuth>
                    } />
                    <Route path="/upload" element={
                        <RequireAuth redirectTo="/login">
                            <Upload />
                        </RequireAuth>
                    } />
                </Routes>
            </div>
        </BrowserRouter>
    </Provider>
)

function RequireAuth({ children, redirectTo }) {
    return getUser() ? children : <Navigate to={redirectTo} />;
}

ReactDOM.render(routing, document.getElementById('root'));

我收到此錯誤：

錯誤：無效的掛鉤呼叫。鉤子只能在函陣列件的主體內部呼叫。這可能是由于以下原因之一造成的：

1. 你可能有不匹配的 React 版本和渲染器（例如 React DOM）
2. 你可能會違反 Hooks 規則
3. 您可能在同一個應用程式中擁有多個 React 副本，請參閱https://reactjs.org/link/invalid-hook-call以獲取有關如何除錯和修復此問題的提示。

我不明白為什么會這樣。我使用看似相似的方法將登錄組件放在一起，沒有任何問題。

這是否意味著 React 沒有將我的函式識別為函式式組件？

uj5u.com熱心網友回復：

const mainMenu = MainMenu();

您在MainMenu模塊加載時作為常規函式呼叫，而不是作為 React 樹中的組件呼叫。

你需要擺脫它并使用<MainMenu />你有的地方{mainMenu}

標籤：javascript 反应

上一篇：作為初學者React開發人員使用setState（類組件）

下一篇：ReactJS：重置時的單選按鈕