Mengapa Tidak Kemas Kini Keadaan Reaksi Saya Di Dalam `setInterval`?

Nyatakan Tidak Kemas Kini Apabila Menggunakan React State Hook Dalam setInterval

Dalam ciri Cangkuk baharu React, komponen Jam direka bentuk untuk memaparkan nilai masa yang bertambah setiap saat. Walaupun pemasa beroperasi, nilai masa kekal bertakung pada satu.

Punca Isu

Punca masalah ini terletak pada penutupan setInterval. Fungsi panggil balik dalam penutupan ini hanya mempunyai akses kepada nilai awal pembolehubah masa. Oleh kerana fungsi useEffect() tidak dilaksanakan selepas pemaparan pertama, panggilan balik tidak menerima nilai masa berikutnya.

Akses Nilai Masa

Oleh itu, pembolehubah masa sentiasa membawa nilai awal sifar dalam panggilan balik untuk setInterval.

Penyelesaian: Menggunakan Borang Panggilan Balik Cangkuk Negeri

Serupa dengan kaedah setState tradisional, cangkuk negeri menawarkan dua pilihan: yang pertama menerima keadaan yang dikemas kini, manakala borang panggil balik menerima keadaan semasa. Untuk menyelesaikan isu ini, adalah disyorkan untuk menggunakan borang panggil balik dan memperoleh nilai keadaan terkini sebelum menambah dalam panggilan balik setState.

Pendekatan Alternatif

Catatan blog Dan Abramov mendalami penggunaan setInterval dengan cangkuk, membentangkan penyelesaian yang berbeza untuk masalah ini. Membacanya amat disyorkan.

Kod Kemas Kini

Kod di bawah menunjukkan pelaksanaan yang diperbetulkan:

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

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

ReactDOM.render(<Clock />, document.querySelector('#app'));

Atas ialah kandungan terperinci Mengapa Tidak Kemas Kini Keadaan Reaksi Saya Di Dalam `setInterval`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!