錯誤：無效的掛鈎調用。 鈎子只能在函數組件的主體內部調用。 （帶反應帶）

Question

伙計們，我知道這個錯誤在這里問了很多次，但我仍然對此感到困惑。 所以我嘗試調用下面的 Navbar 組件，

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import {Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink} from 'reactstrap';

const [collapsed, setCollapsed] = useState(true);
const toggleNavbar = () => setCollapsed(!collapsed);


var mainNavbar1= () => {

return(
    <div className = "mt-2">
        <Navbar color="faded" light>
        <NavbarBrand href="/" className="mr-auto">Welcome!</NavbarBrand>

        <NavbarToggler onClick={toggleNavbar} className="mr-2" />

        <Collapse isOpen={!collapsed} navbar>
            <Nav navbar>
            <NavItem>
                <NavLink href="/components/">Home</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="/components/">About</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="/components/">Contact Me</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="/components/">Components</NavLink>
            </NavItem>
            <NavItem>
                <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink>
            </NavItem>
            </Nav>
        </Collapse>

        </Navbar>
    </div>
);
}

export default mainNavbar1;

在主要組件“應用程序”中，

import React, { useState } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Alert, Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink , Jumbotron,                 
Button, Container, Row, Col} from 'reactstrap';
import {mainNavbar1} from './mainNavbar';

var underDevelopmentAlert = () => {
   alert("Page under development!!");
}


var App = () => {

   return (
    <mainNavbar1/>
   )

}

我得到了上面的錯誤。 我已經閱讀了 Hooks 的規則並且仍然得到了這個。 我很確定我已經正確地遵循了一切..我錯過了什么嗎？ （Navbar組件直接從Reactstrap官網復制過來的）

Answer 1

首先，React 組件必須以大寫字母開頭，沒有例外。

其次，您的鈎子不在組件內部，它們僅在組件所在的文件內部。您需要將它們實際放入組件定義中。 像這樣：

const MainNavbar1 = () => {

    const [collapsed, setCollapsed] = useState(true);
    const toggleNavbar = () => setCollapsed(!collapsed);

    return(...)
}

Answer 2

hooks 位置不對，應該在組件函數中而不是out：

錯誤的方法：

const [collapsed, setCollapsed] = useState(true);


var MainNavbar1= () => {...}

正確的方法：

var MainNavbar1= () => {
  const [collapsed, setCollapsed] = useState(true);
  ...
}