не могу использовать хук useState в моем компоненте, я получаю следующую ошибку,

Question

Я не могу использовать хук useState в этом компоненте, я могу использовать его в компоненте LandingPage, как показано на маршрутах выше, но не могу использовать его в компоненте fatburner

сообщение об ошибке React Hook " useState "вызывается в функции" fatburner ", которая не является ни компонентом функции React, ни пользовательской функцией React Hook

My Routes Main. js

import LandingPage from './LandingPage'
import { Route, Switch } from 'react-router-dom'
import Headings from './headings'
import Protein from './Proteins/protein';
import Fatburner from './Fatburners/fatburners';

const main = (props) => {
    return (
        <div>
            <Switch>
                <Route path='/'
                    exact
                    component={LandingPage}
                />
                <Route path='/protein'
                    exact
                    component={Protein}
                />
                <Route path='/fatburner'
                    exact
                    component={Fatburner}
                />
                {/* <Route
                    // component={NoMatch}
                    render={() => (<h4>does not exist</h4>)}
                /> */}
            </Switch>

        </div>
    )
}

export default main

fatburner. js

import Navbar from '../../../components/Navbar/Navbar'
import Itemcard from '../../../components/itemcard/itemcard';
import { Col, Row, Container, InputGroup } from 'react-bootstrap';



const fatburner = (props) => {
    const [count, setCount] = useState({});

    const fatburnerData =
        [
            { brand: "Muscle Blaze", img: "https://images-na.ssl-images-amazon.com/images/I/61%2Botc5mYSL._SX466_.jpg", text: "Muscleblaze Fat Burner 910 Mg , 90 Capsules Unflavoured", price: 410, previous: 599 },
            { brand: "Muscle Blaze", img: "https://img10.hkrtcdn.com/9868/prd_986779-MuscleBlaze-Keto-Burner-60-capsules-Unflavoured_o.jpg", text: "MuscleBlaze Keto Burner, Fat Burner 60 capsules, Unflavoured", price: 900, previous: 1299 },
            { brand: "Evogen", img: "https://img4.hkrtcdn.com/11741/prd_1174013-Evogen-Lipocide-X-Fat-Burner-60-capsules-Unflavoured_o.jpg", text: "Evogen Lipocide X Fat Burner, 60 capsules, Unflavoured", price: 2800, previous: 3500 },
            { brand: "MuscleTech", img: "https://img6.hkrtcdn.com/2734/prd_273315_o.jpg", text: "MuscleTech Hydroxycut Hardcore Next Gen, 100 capsules, Unflavoured", price: 2900, previous: 3000 }
        ]
    const fatburnerRow = fatburnerData.map((ele, index) => {
        return (
            <Col sm={3} key={index}>
                <Itemcard
                    img={ele.img}
                    text={ele.text}
                    price={ele.price}
                    prevPrice={ele.previous}
                />
            </Col>
        )
    })

    let filteredBrand = [];
    let priceFilter = fatburnerData.map((ele, index) => {
        console.log(ele.brand)
        if (filteredBrand.indexOf(ele.brand) == -1) {
            filteredBrand.push(ele.brand)
        }
        console.log(filteredBrand, "filtered")
    })
    let mapFilterBrand = [];
    if (filteredBrand.length > 1) {
        mapFilterBrand = filteredBrand.map(ele => {
            return (
                <InputGroup className="mb-3">
                    <InputGroup.Checkbox aria-label="Checkbox for following text input"
                        label={ele}
                        value={ele}
                    />{ele}
                </InputGroup>
            )
        })
    }
    // const [brandfilter, setBrandFilter] = React.useState([]);
    return (

        <div>
            <Navbar />
            <Container fluid={true} style={{ marginTop: '65px' }}>
                <Row>
                    <Col sm={2}>
                        <h5 style={{ textAlign: 'center' }}>Filters</h5>
                        {priceFilter}
                        {mapFilterBrand}
                    </Col>
                    <Col sm={10} >
                        <Row>
                            {fatburnerRow}
                        </Row>
                    </Col>

                </Row>
            </Container>

        </div>
    )
}

export default fatburner;```

Answer 1

Вы не должны вызывать хуки из обычных функций javascript.

Функцию можно преобразовать в компонент React Function, выполнив следующие действия ... Переименуйте fatburner в Fatburner. Таким образом, у вас будет const Fatburner = (props) => {...

Подробнее здесь - https://reactjs.org/docs/hooks-rules.html#only -call-hooks-from-реагировать-функции