Mengapa Cangkuk `setInterval` React Saya Gagal Mengemas kini Keadaan dengan Betul?

State Trap Within React's setInterval Hook

Apabila menggunakan React's useState hook dalam setInterval, adalah penting untuk mengetahui kemungkinan cabaran: kemas kini keadaan mungkin tidak mencerminkan seperti yang dijangkakan.

Dalam contoh kod yang disediakan, walaupun cuba menambah keadaan masa setiap saat, ia kekal tersekat pada 0. Ini kerana panggilan balik dalam setInterval terikat dengan nilai masa awal dan tidak mempunyai akses kepada kemas kini keadaan seterusnya.

Penyelesaian: Menggunakan Borang Panggilan Balik useState

Untuk menyelesaikan isu ini, gunakan borang panggil balik useState. Ini membolehkan panggilan balik mengakses nilai keadaan semasa sebelum mengemas kininya.

setTime(prevTime => prevTime + 1); // Updates based on current state

Kemas Kini Pelaksanaan:

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

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

Bonus: Pendekatan Alternatif

Untuk maklumat lanjut tentang pengendalian setInterval dengan cangkuk, rujuk Dan Catatan blog Abramov, yang meneroka kaedah alternatif, seperti menggunakan rujukan atau cangkuk useReducer.

Atas ialah kandungan terperinci Mengapa Cangkuk `setInterval` React Saya Gagal Mengemas kini Keadaan dengan Betul?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!