Mengapakah Menggunakan `setInterval` dengan Cangkuk Keadaan Bertindak Menyebabkan Gelagat Tidak Dijangka?

Menggunakan React State Hooks dengan setInterval: Memahami Isu Kemas Kini Negeri

Dalam React, menggunakan cangkuk keadaan dalam setInterval boleh menyebabkan masalah dengan kemas kini negeri. Ini timbul apabila fungsi panggil balik dihantar ke setInterval mengekalkan akses kepada nilai keadaan awal, menghalang kemas kini berikutnya daripada ditunjukkan.

Masalahnya

Pertimbangkan komponen Jam berikut:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime(time + 1);
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return <div>Seconds: {time}</div>;
}

Isunya terletak pada fungsi panggil balik setTime. Ia merujuk pembolehubah masa pada masa pemaparan pertama, bukan nilai dikemas kini daripada pemaparan berikutnya. Akibatnya, kemas kini keadaan adalah terhad kepada nilai awal.

Penyelesaian

Untuk membetulkan isu ini, gunakan borang panggil balik cangkuk keadaan, yang menyediakan akses kepada nilai keadaan semasa:

function Clock() {
  const [time, setTime] = React.useState(0);
  React.useEffect(() => {
    const timer = window.setInterval(() => {
      setTime((prevTime) => prevTime + 1); // Get the latest state value
    }, 1000);
    return () => {
      window.clearInterval(timer);
    };
  }, []);

  return <div>Seconds: {time}</div>;
}

Kini, fungsi panggil balik dengan betul menggunakan nilai keadaan terkini, memastikan masa dikemas kini sebagai dijangka.

Pendekatan Alternatif

Dan Abramov meneroka cara lain untuk mengendalikan setInterval dengan cangkuk dalam catatan blognya, menawarkan pendekatan alternatif yang mungkin sesuai dengan senario tertentu.

Atas ialah kandungan terperinci Mengapakah Menggunakan `setInterval` dengan Cangkuk Keadaan Bertindak Menyebabkan Gelagat Tidak Dijangka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!