react hooks 防止重复点击事件

一、使用useRef控制

import React ,{useState, useRef} from 'react'
import './App.css';


function App() {
  const [count ,setCount] = useState(0)
  const flag = useRef(true)
  const handleCount =()=>{  
    if(flag.current){
      flag.current = false
      setCount(count+1) // 这里等待请求完后端数据后，将状态设成 true
      setTimeout(()=>{
        flag.current = true
      },3000)
    } 
  }
  return (
    <div className="App">
      
        <h3>这是一个页面的头部标题</h3>
        <div>
          <div> {count} </div>
          <button onClick={()=>{handleCount()}}>点赞👍</button>
        </div>
        <div>
        
      </div>
    </div>
  );
}

export default App;