Mengapakah saya mendapat ralat 'Tidak dapat melakukan kemas kini keadaan React pada komponen yang tidak dilekapkan' dan bagaimana saya boleh membetulkannya?

Memahami Ralat "Tidak dapat melakukan kemas kini keadaan React pada komponen yang tidak dipasang"

Ralat ini berlaku apabila React cuba mengemas kini keadaan komponen yang mempunyai telah dinyahlekap daripada DOM. React mengekalkan bendera dalaman untuk setiap komponen, menunjukkan sama ada ia sedang dipasang atau tidak. Jika kemas kini dicetuskan selepas komponen dinyahlekap, React menimbulkan ralat ini untuk mengelakkan kemungkinan kebocoran memori dan tingkah laku lain yang tidak dapat diramalkan.

Mengenal pasti Komponen dan Peristiwa yang Menyinggung perasaan

Surih tindanan yang disediakan dalam anda mesej ralat termasuk maklumat yang boleh membantu anda mengenal pasti komponen yang menyinggung perasaan dan pengendali acara atau cangkuk kitaran hayat yang bertanggungjawab untuk kemas kini keadaan. Cari nilai "komponen" dalam surih tindanan, kerana ia harus mengandungi nama komponen. Selain itu, pengendali peristiwa tertentu atau cangkuk kitaran hayat yang mencetuskan kemas kini selalunya boleh disimpulkan daripada nama fungsi atau konteks sekeliling dalam kod.

Membetulkan Masalah

Untuk menyelesaikan isu, anda perlu memastikan kemas kini keadaan hanya dilakukan semasa komponen masih dipasang. Begini cara untuk mendekati ini:

• Semak Bendera isMounted: Dalam komponen berasaskan kelas, anda boleh mencipta bendera isMounted boolean yang ditetapkan kepada false dalam componentWillUnmount. Sebelum melakukan kemas kini keadaan, semak sama ada isMounted adalah benar untuk memastikan komponen masih dipaparkan.

  class Component extends React.Component {
    componentWillUnmount() {
      this.isMounted = false;
    }
  
    someMethod() {
      if (this.isMounted) {
        this.setState({ ... });
      }
    }
  }

• Gunakan Rendering Bersyarat: Dalam komponen berfungsi, anda boleh gunakan pemaparan bersyarat untuk mengelakkan pemaparan komponen apabila ia telah dinyahlekapkan. Balut kemas kini keadaan dalam cangkuk useEffect dengan tatasusunan kebergantungan yang termasuk bendera isMounted.

  const Component = props => {
    const [isMounted, setIsMounted] = React.useState(true);
  
    useEffect(() => {
      return () => setIsMounted(false);
    }, []);
  
    if (!isMounted) return null;
  
    // State updates here...
  };

• Batalkan Fungsi Async: Jika kemas kini keadaan dicetuskan oleh operasi tak segerak, seperti setTimeout atau fetch, ingat untuk membatalkan operasi dalam cangkuk kitar hayat componentWillUnmount atau fungsi pembersihan cangkuk useEffect. Ini menghalang kemas kini keadaan daripada berlaku selepas komponen dinyahlekapkan.

  class Component extends React.Component {
    componentWillUnmount() {
      clearTimeout(this.timeoutId);
    }
  
    componentDidMount() {
      this.timeoutId = setTimeout(() => {
        this.setState({ ... });
      }, 1000);
    }
  }

Atas ialah kandungan terperinci Mengapakah saya mendapat ralat 'Tidak dapat melakukan kemas kini keadaan React pada komponen yang tidak dilekapkan' dan bagaimana saya boleh membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!