試圖創建一個反應組件，但無法在頂層調用 React Hook “React.useState”。”

Question

我正在嘗試向我的 React 組件添加一堆模式，但我不斷收到錯誤“無法在頂層調用“React.useState”。 這段代碼最初在我的 App.js 文件中，它可以運行，但我想通過將其制成組件來使其更整潔。

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 僅適用於功能組件，您正在創建 class 組件並在其上放置掛鈎 這是相同的代碼，我剛剛將 class 組件轉換為箭頭 ZC1C425268E68385D1AB5074C17A94F4 組件並將掛鈎放置在組件內部

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鈎子是 function 組件的替代品，因為后者沒有 state。

添加構造函數：

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

並將其他方法添加到 class 組件的主體中。