Question

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

错误消息是React Hook“ useState”在函数“ 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;```

Answer 1

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

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

在此处了解更多-https://reactjs.org/docs/hooks-rules.html#only-call-hooks-from-react-functions

无法在我的组件中使用useState挂钩，出现以下错误，

1 个答案: