reactjs - 无法在我的组件中使用 useState 挂钩，我收到以下错误，

问题描述

我无法在此组件中使用 useState 挂钩，我可以在 LandingPage 组件中使用它，如上面的路线所示，但不能在 fatburner 组件中使用它

错误消息是 React Hook "useState" is called in function "fatburner" 这既不是 React 函数组件也不是自定义 React Hook 函数

我的路线 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;```

标签： reactjsreact-hooks

您不应该从常规 javascript 函数中调用钩子。

您可以通过执行以下操作将函数转换为 React Function 组件... 重命名fatburner为Fatburner. 所以你会有const Fatburner = (props) => {...

reactjs - 无法在我的组件中使用 useState 挂钩，我收到以下错误，

问题描述

解决方案

推荐阅读