Évitez de réinitialiser le délai d'attente lors de l'actualisation dans Reactjs

Question

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 (
    <div>

      <h3>{count} / 3</h3>
      <button disabled={disable} onClick={handleDec}>
        Remaining Use
      </button>

    </div>
  )
}

export default Without

Answer 1

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 (
    <div>
      <h3>{count} / 3</h3>
      <button disabled={disable} onClick={handleDec}>
        剩余使用次数
      </button>
    </div>
  );
}

export default Without;

Answer 2

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);
      }
    }
  }, []);