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;

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