Elakkan menetapkan semula tamat masa semasa muat semula dalam Reactjs

Question

Terdapat butang yang akan dilumpuhkan selepas 3 klik. Apabila saya memuat semula halaman, kaunter tetap sama (1/3, 2/3 atau 0/3). Tetapi saya tidak boleh melakukan perkara yang sama dengan butang yang dilumpuhkan. Saya tidak mahu menetapkan semula setTimeout. Saya harap ia menyambung dari tempat saya berhenti.

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

Jangan bergantung pada fungsi setTimeOut dengan kelewatan 5000ms, sebaliknya pertimbangkan untuk menggunakan cap masa. Anda boleh menyimpan cap masa dalam localStorage dan kemudian bandingkan dengan cap masa semasa. Jika perbezaannya sama dengan atau lebih daripada 5000ms, butang didayakan semula. Berikut ialah kod lengkap dan pelaksanaan saya:

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

Anda hanya perlu menetapkan tambahan jika semakan penyata untuk '0' dilumpuhkan. Anda telah menyimpan nilai dengan betul.

//LOCALSTORAGE
  useEffect(() => {
    const storedCount = localStorage.getItem('count');
    console.log("storedcount: ", storedCount);
    if (storedCount) {
      setCount(parseInt(storedCount));
      if (storedCount === '0') {
        setDisable(true);
      }
    }
  }, []);