Mengapa 'ini' tidak ditentukan dalam Fungsi Komponen Bertindak balas, dan Bagaimana Saya Boleh Membetulkannya?

Memahami "ini" dalam Fungsi Komponen React

Apabila bekerja dengan React, anda mungkin menghadapi ralat "ini tidak ditentukan dalam fungsi komponen." Ini berlaku apabila anda cuba mengakses objek ini dalam fungsi komponen dan ia tidak ditentukan.

Dalam ES6 React.Component, kaedah tidak terikat secara automatik pada komponen itu sendiri. Sebaliknya, anda perlu mengikatnya secara eksplisit dalam pembina. Untuk menyelesaikan isu yang dinyatakan dalam contoh, anda boleh menggunakan langkah berikut:

1. Ikat Kaedah dalam Pembina:
   Dalam pembina, tambahkan baris berikut untuk mengikat kaedah onToggleLoop:

   this.onToggleLoop = this.onToggleLoop.bind(this);

2. Kemas kini Komponen:
   Kemas kini komponen anda dengan pembina yang diubah suai seperti berikut:

   class PlayerControls extends React.Component {
     constructor(props) {
       super(props)
   
       this.state = {
         loopActive: false,
         shuffleActive: false,
       }
   
       this.onToggleLoop = this.onToggleLoop.bind(this);
     }
   
     // ... rest of the code
   }

Dengan mengikat kaedah onToggleLoop dalam pembina, anda memastikan bahawa ini merujuk kepada contoh komponen yang betul apabila kaedah digunakan. Ini membolehkan anda berjaya mengemas kini keadaan loopActive dan melaksanakan prop onToggleLoop yang diluluskan oleh komponen induk.

Atas ialah kandungan terperinci Mengapa 'ini' tidak ditentukan dalam Fungsi Komponen Bertindak balas, dan Bagaimana Saya Boleh Membetulkannya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!