为什么我在增加数量的时候不能看到我的模式？

Question

你能告诉我为什么当我增加数量时我的模态没有出现吗？计数有效，但Modal不起作用。我想在我增加数量的时候给Modal看。谢谢

function App() {
  const [count, setCoutn] = useState(0)
  const [showModal, setShowModal] = useState(false)


 const increase = () => {
  setCoutn(count + 1)
  setShowModal(true)
 }

  return (
    <>
     
      { showModal && < Modal /> }
      <p className="text-center mt-5 mt-5 fs-5 count">{count}</p>
      <div className="btn-box">

        <button className="btn btn-outline-primary" onClick={()=>increase()}>increase</button>

      </div>
    </>
  );
}


const Modal = () => {
  return (
     <div>
       <p className='modal'>Modal</p>   
     </div>
  )
}

Answer 1

检查你的演示

而不是：

onClick={()=>increase()}

但我建议使用：

onClick={increase}

因为它将在单击按钮时直接调用函数。

Answer 2

 **You cant see modal,because showModal is false default!**
    

function App() {
      const [count, setCoutn] = useState(0)
      const [showModal, setShowModal] = useState(false)
    
    
     const increase = () => {
      setCoutn(count + 1)
      setShowModal(true)
     }
      if(showModal) {
      return (
        <>
          <p className="text-center mt-5 mt-5 fs-5 count">{count}</p>
          <div className="btn-box">
    
            <button className="btn btn-outline-primary" onClick={()=>increase()}>increase</button>
    
          </div>
        </>
      );
    }else{
        return (
         <div>
           <p className='modal'>Modal</p>   
         </div>
      )
    }
    }