javascript - Modal通过点击调用，但立即消失（Next.js）

Question

我正在尝试通过单击卡片来创建模式。我已经制作了组件并且它实际呈现，但仅用于一个实例，然后它消失而不关闭它。这就像它正在刷新页面。

这是我的组件：

import React, { useState } from 'react'
import Modal from 'react-modal'
import '../CourseModal/styles/coursemodal.module.scss'
import Styles from "../RoundButton/styles/RoundButton.module.scss";

export default function CourseModal() {
  const [showModal, setShowModal] = useState (false)
  
  return ( 
    <div>
        <button type="button" className={`${Styles.button}`} onClick={() => setShowModal (true)}>
        ABRIR
        </button>             
        <Modal isOpen={showModal}>
          <h1>PRUEBA</h1>
          <p>MODAL BODY</p>
        </Modal>            
    </div>
  )
}

这是我调用模态的卡片组件：

import React, { useState } from 'react'
import Styles from '../CardCourses/styles/card.module.scss'
import RoundButton from '../RoundButton/RoundButton'
import CourseModal from '../CourseModal/CourseModal'    

export default function CardCourses() {    
  return (
    <div className={`${Styles.background}`}>
      <div className={`${Styles.band}`}>
        <div className={`${Styles.item1}`}>
          <a href='' className={`${Styles.card}`} >               
          <div className={`${Styles.thumb}`} ></div>
          <article>
            <h1>Título del curso</h1>
            <ul className={Styles.listStyle}>
              <il>
                <svg className={Styles.babyLogo}/>
              </il>
                <svg className={Styles.videoPlayer}/>
              <il>
              </il>
            </ul>
            <span>Descripción del curso.Descripción del curso.Descripción del curso.Descripción del curso.</span>                  
            <CourseModal/>                                    
          </article>
            <div  className={Styles.cardFooter}>
              <span>Por: Nombre partner<br/>Asesor de---certificado</span>
            </div>
          </a>              
        </div>
      </div>
    </div>
  )
}

标签： javascriptnext.js