Il y a un bouton qui sera désactivé après 3 clics. Lorsque j'actualise la page, le compteur reste le même (1/3, 2/3 ou 0/3). Mais je ne peux pas faire la même chose avec les boutons désactivés. Je ne veux pas réinitialiser setTimeout. J'espère que cela reprendra là où je m'étais arrêté.
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 ( {count} / 3
) } export default Without
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Ne comptez pas sur la fonction setTimeOut avec un délai de 5 000 ms, pensez plutôt à utiliser des horodatages. Vous pouvez enregistrer l'horodatage dans localStorage, puis comparer avec l'horodatage actuel. Si la différence est égale ou supérieure à 5000 ms, le bouton est réactivé. Voici le code complet et mon implémentation :
import React, { useEffect, useState } from "react"; function Without() { const [count, setCount] = useState(3); const [disable, setDisable] = useState(false); const handleDec = () => { if (count > 1) { setCount(count - 1); } else { setCount(0); setDisable(true); const timestamp = new Date().getTime(); // 获取当前时间戳 localStorage.setItem("disabledTimestamp", timestamp); } }; // 检查按钮被禁用后是否已经过了5秒 useEffect(() => { const disabledTimestamp = localStorage.getItem("disabledTimestamp"); if (disabledTimestamp) { const currentTime = new Date().getTime(); const fiveSecondsInMillis = 5000; const difference = currentTime - parseInt(disabledTimestamp, 10); if (difference < fiveSecondsInMillis) { setDisable(true); const timeout = setTimeout(() => { setDisable(false); setCount(3); localStorage.removeItem("disabledTimestamp"); // 重新启用按钮后重置时间戳 }, fiveSecondsInMillis - difference); return () => clearTimeout(timeout); } else { setDisable(false); localStorage.removeItem("disabledTimestamp"); // 如果超过5秒则重置时间戳 } } }, [disable]); // LOCALSTORAGE useEffect(() => { const storedCount = localStorage.getItem("count"); if (storedCount) { setCount(parseInt(storedCount)); } }, []); return ( ); } export default Without;{count} / 3
Il vous suffit de définir une vérification supplémentaire de l'instruction if pour « 0 » pour la désactiver. Vous avez correctement enregistré la valeur.
//LOCALSTORAGE useEffect(() => { const storedCount = localStorage.getItem('count'); console.log("storedcount: ", storedCount); if (storedCount) { setCount(parseInt(storedCount)); if (storedCount === '0') { setDisable(true); } } }, []);