试图创建一个反应组件，但无法在顶层调用 React Hook “React.useState”。”

Question

I am trying to add a bunch of modals to my React component but I keep getting the error " "React.useState" cannot be called at the top level ". This code was originally in my App.js file and it ran but I wanted to make it neater by making it into component.

const[showTotModal, setTotShowModal] = React.useState(false)
    const openTotModal = () => {
    setTotShowModal(prev => !prev);
    };

    const[showCasModal, setCasShowModal] = React.useState(false)
    const openCasModal = () => {
    setCasShowModal(prev => !prev);
    };

    const[showGraModal, setGraShowModal] = React.useState(false)
    const openGraModal = () => {
    setGraShowModal(prev => !prev);
    };

    const[showKikModal, setKikShowModal] = React.useState(false)
    const openKikModal = () => {
    setKikShowModal(prev => !prev);
    };

    const[showSpiModal, setSpiShowModal] = React.useState(false)
    const openSpiModal = () => {
    setSpiShowModal(prev => !prev);
    };

    const[showHowModal, setHowShowModal] = React.useState(false)
    const openHowModal = () => {
    setHowShowModal(prev => !prev);
    };

class GhibliModal extends Component{

    render(){

        return(
        <Container>
            <Button onClick={openTotModal}> <img src={tot} alt="tot" height='300' /> </Button>
            <Button onClick={openCasModal}> <img src={cas} alt="cas" height='300' /> </Button>
            <Button onClick={openGraModal}> <img src={gra} alt="gra" height='300' /> </Button>
            <Button onClick={openKikModal}> <img src={kik} alt="gra" height='300' /> </Button>
            <Button onClick={openSpiModal}> <img src={spi} alt="gra" height='300' /> </Button>
            <Button onClick={openHowModal}> <img src={how} alt="gra" height='300' /> </Button>
            
            <TotModal showModal={showTotModal} setShowModal={setTotShowModal}/>
            <CasModal showModal={showCasModal} setShowModal={setCasShowModal}/>
            <GraModal showModal={showGraModal} setShowModal={setGraShowModal}/>
            <KikModal showModal={showKikModal} setShowModal={setKikShowModal}/>
            <SpiModal showModal={showSpiModal} setShowModal={setSpiShowModal}/>
            <HowModal showModal={showHowModal} setShowModal={setHowShowModal}/>
        </Container>

        )

    }

}

export default GhibliModal

Answer 1

First Thing Hooks only work inside Functional components you are creating a class component and placing hooks on top of that here is the same code I just converted the class component to an Arrow function and placed the hooks inside the component

const GhibliModal  = () =>{

const[showTotModal, setTotShowModal] = React.useState(false)
const[showHowModal, setHowShowModal] = React.useState(false)
const[showCasModal, setCasShowModal] = React.useState(false)
 const[showGraModal, setGraShowModal] = React.useState(false)
const[showKikModal, setKikShowModal] = React.useState(false)
const[showSpiModal, setSpiShowModal] = React.useState(false)
    const openTotModal = () => {
    setTotShowModal(prev => !prev);
    };

    
    const openCasModal = () => {
    setCasShowModal(prev => !prev);
    };

   
    const openGraModal = () => {
    setGraShowModal(prev => !prev);
    };

    
    const openKikModal = () => {
    setKikShowModal(prev => !prev);
    };

    
    const openSpiModal = () => {
    setSpiShowModal(prev => !prev);
    };

    
    const openHowModal = () => {
    setHowShowModal(prev => !prev);
    };
  

        return(
        <Container>
            <Button onClick={openTotModal}> <img src={tot} alt="tot" height='300' /> </Button>
            <Button onClick={openCasModal}> <img src={cas} alt="cas" height='300' /> </Button>
            <Button onClick={openGraModal}> <img src={gra} alt="gra" height='300' /> </Button>
            <Button onClick={openKikModal}> <img src={kik} alt="gra" height='300' /> </Button>
            <Button onClick={openSpiModal}> <img src={spi} alt="gra" height='300' /> </Button>
            <Button onClick={openHowModal}> <img src={how} alt="gra" height='300' /> </Button>
            
            <TotModal showModal={showTotModal} setShowModal={setTotShowModal}/>
            <CasModal showModal={showCasModal} setShowModal={setCasShowModal}/>
            <GraModal showModal={showGraModal} setShowModal={setGraShowModal}/>
            <KikModal showModal={showKikModal} setShowModal={setKikShowModal}/>
            <SpiModal showModal={showSpiModal} setShowModal={setSpiShowModal}/>
            <HowModal showModal={showHowModal} setShowModal={setHowShowModal}/>
        </Container>

        )

    

}

export default GhibliModal

Answer 2

useState hook is a replacement for function components as the latter do not have state.

Add a constructor:

constructor(props) {
    super(props);
    this.state = {tot: false, how: false, cas: false, gra: false, kik:false, spi: false };
}

And add the other methods to the body of your class component.