Bagaimana untuk Menyelesaikan Ralat 'Tidak dapat melakukan kemas kini keadaan React pada komponen yang tidak dipasang'?

Tidak Dapat Melakukan Kemas Kini Keadaan Reaksi pada Komponen Tidak Dilekapkan

Masalah

Bila bekerja dengan React, adalah mungkin untuk menemui mesej ralat "Tidak dapat melakukan kemas kini keadaan React pada yang tidak dipasang komponen." Ralat ini biasanya berlaku apabila anda cuba mengemas kini keadaan komponen selepas ia dinyahlekap daripada DOM.

Mengenal pasti Komponen yang Menyinggung

Daripada surih tindanan, anda boleh mengenal pasti komponen yang bertanggungjawab untuk ralat dengan menjejak kembali timbunan panggilan untuk mencari komponen yang dipanggil setState(...) selepas ia dinyahlekapkan. Komponen yang menyinggung perasaan akan disenaraikan dalam surih tindanan sebagai componentName.prototype.setState.

Menyelesaikan Masalah

Untuk membetulkan ralat ini, terdapat beberapa pendekatan yang boleh anda ambil :

1. Batalkan Tugasan Tak Segerak: Jika anda mempunyai sebarang tugas tak segerak, seperti pengambilan atau tamat masa, berjalan dalam komponen, batalkannya dalam kaedah componentWillUnmount. Tugasan ini boleh terus dijalankan selepas komponen dinyahlekap, menyebabkan kemas kini keadaan berlaku pada komponen yang tidak dilekapkan.
2. Kemas Kini Negeri Jaga: Balut kemas kini keadaan dalam semakan bersyarat yang memastikan komponen berada masih dipasang sebelum mengemas kini keadaannya. Contohnya:

if (this.isMounted) {
  this.setState({ ... });
}

3. Gunakan React Hooks: Jika anda menggunakan React Hooks, anda boleh menggunakan fungsi pembersihan dalam useEffect hook untuk membatalkan sebarang asynchronous tugasan dan togol bendera pelekap. Ini memastikan kemas kini keadaan hanya berlaku semasa komponen dipasang.

Contoh (React Hooks)

useEffect(() => {
  let isMounted = true;
  const fetchData = async () => {
    try {
      const data = await fetch('...');
      if (isMounted) setState(data);
    } catch (error) {
      console.error(error);
    }
  };
  fetchData();
  return () => { isMounted = false; };
}, []);

Dengan melaksanakan salah satu pendekatan ini, anda boleh menghalang ralat "Tidak dapat melakukan kemas kini keadaan React pada komponen yang tidak dipasang" dan memastikan bahawa pengurusan keadaan anda selaras dengan komponen kitaran hayat.

Atas ialah kandungan terperinci Bagaimana untuk Menyelesaikan Ralat 'Tidak dapat melakukan kemas kini keadaan React pada komponen yang tidak dipasang'?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!