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

Mengenalpasti Komponen Bermasalah

Surih tindanan yang disediakan dalam konsol penyemak imbas menunjukkan komponen yang bertanggungjawab terhadap pelanggaran kemas kini keadaan. Setiap baris dalam surih tindanan mewakili panggilan fungsi, dengan nama komponen atau pembina kelas disebut dalam kurungan:

• dalam TextLayerInternal (dicipta oleh Context.Consumer)
• dalam TextLayer ( dicipta oleh PageInternal)

Ini menunjukkan bahawa komponen TextLayer sedang cuba mengemas kini keadaan selepas ia dinyahlekapkan.

Menyelesaikan Ralat Kemas Kini Negeri

Untuk menyelesaikan isu, anda harus mengesahkan bahawa semua operasi async dibatalkan atau selesai sebelum komponen dinyahlekap dalam componentWillUnmount. Dalam kes anda, ini melibatkan pengendalian fungsi pendikit setDivSizeThrottleable.

Kod Disemak

Dalam komponen Buku yang disemak, anda telah membuat perubahan berikut:

• Menukar setDivSizeThrottleable kepada fungsi boleh dibatalkan menggunakan throttle.cancel().
• Menambah fungsi pembersihan dalam componentWillUnmount untuk membatalkan fungsi throttleable.

class Book extends React.Component {
  setDivSizeThrottleable: ((() => void) & Cancelable) | undefined;
  ...

  componentDidMount = () => {
    this.setDivSizeThrottleable = throttle(
      () => {
        this.setState({
          pdfWidth: this.pdfWrapper!.getBoundingClientRect().width - 5,
        });
      },
      500,
    );

    this.setDivSizeThrottleable();
    window.addEventListener("resize", this.setDivSizeThrottleable);
  };

  componentWillUnmount = () => {
    window.removeEventListener("resize", this.setDivSizeThrottleable!);
    this.setDivSizeThrottleable!.cancel();
    this.setDivSizeThrottleable = undefined;
  };

Dengan mengendalikan pembatalan fungsi throttleable dengan betul, anda boleh menghalang nyatakan pelanggaran kemas kini dan selesaikan ralat "Tidak dapat melakukan kemas kini keadaan React pada komponen yang dinyahlekap".

Atas ialah kandungan terperinci Bagaimana untuk Membetulkan 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!