Ошибка: неверный вызов ловушки. Хуки могут быть вызваны только внутри тела функционального компонента. (с Reactstrap)

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;

Внутри основного компонента 'App',

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/>
   )

}

И я получил ошибку выше. Я уже прочитал правила Крюков и все еще получил это. Я почти уверен, что уже все правильно понимаю. Я что-то упустил? (Компонент Navbar скопирован прямо с официального сайта Reactstrap)

Answer 1

Неправильное положение крючков, должно быть в функции компонента, но не вне:

Неправильный путь:

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


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

Правильный путь:

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

Answer 2

Во-первых, компоненты React ДОЛЖНЫ начинаться с заглавной буквы, без исключений.

Во-вторых, ваши хуки не находятся внутри компонента, они только внутри файла, в котором находится ваш компонент. положить их в определении компонента. Вот так:

const MainNavbar1 = () => {

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

    return(...)
}