setInterval Penyampaian semula tanpa had bagi komponen tindak balas-lengkap. Mengapa ini berlaku dan bagaimana untuk membetulkannya?

Question

Ini kod tindak balas saya. Ia menjadikan komponen itu dipaparkan semula tanpa had:

const [seconds, setSeconds] = useState(60)
useEffect(() => {
    const interval = setInterval(() => {
        setSeconds(seconds => seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
}, []);

console.log("object");

Answer 1

Ini berlaku kerana anda hanya mengosongkan selang apabila komponen memunggah, yang hanya berlaku apabila pengguna menavigasi keluar dari halaman.

Mungkin ini yang anda perlukan? Apabila selang mencapai 0, saya mengosongkannya. Tetapi untuk ini saya perlu menggunakan rujukan, saya tidak boleh menggunakan keadaan dari setInterval kerana ia hanya mempunyai nilai awal:

export default function App() {
  const [seconds, setSeconds] = useState(5);
  const secondsRef = useRef(seconds);

  useEffect(() => {
    const interval = setInterval(() => {
      if (secondsRef.current < 0) {
        clearInterval(interval);
      }

      secondsRef.current = secondsRef.current - 1;
      setSeconds((seconds) => seconds - 1);
    }, 1000);
    return () => clearInterval(interval);
  }, []);

  console.log("running", new Date());

  return 
 {seconds < 0 ? "Time is up!" : seconds} 
;
}