有一個按鈕,點擊3次後會被停用。當我刷新頁面時,計數器保持不變(1/3、2/3或0/3)。但是我無法對禁用的按鈕做同樣的操作。我不想重設setTimeout。我希望它能從離開時的時間繼續。
import React, { useEffect, useState } from 'react' function Without() { //const [count, setCount] = useState(3); const [count, _setCountValue] = useState(3); const [disable, setDisable] = useState(false); function setCount(value) { localStorage.setItem('count', JSON.stringify(value)) return _setCountValue(value) } const handleDec = () => { if (count > 1) { setCount(count - 1); } else { setCount(0); setDisable(true); const timeout = setTimeout(() => { setDisable(false); setCount(3); }, 5000); return () => clearTimeout(timeout); } }; //LOCALSTORAGE useEffect(() => { const storedCount = localStorage.getItem('count'); if (storedCount) { setCount(parseInt(storedCount)); } }, []); return ( <div> <h3>{count} / 3</h3> <button disabled={disable} onClick={handleDec}> Remaining Use </button> </div> ) } export default Without
不要依賴設定延遲為5000ms的setTimeOut函數,考慮使用時間戳記。您可以將時間戳記儲存在localStorage中,然後與目前時間戳記進行比較。如果差值等於或大於5000ms,則重新啟用按鈕。以下是完整的程式碼和我的實作:
您只需要為'0'設定一個額外的if語句檢查來停用。您已經正確地儲存了該值。