Mengapa 'ini' tidak ditentukan dalam fungsi komponen React?

React: "this" is Undefined Inside a Component Function

Apabila bekerja dengan komponen dalam React, anda mungkin menghadapi ralat "this is undefined" dalam fungsi yang ditakrifkan dalam komponen. Ini boleh mengelirukan kerana, menurut dokumentasi rasmi, ini harus merujuk kepada contoh komponen. Jadi, mengapakah ralat ini berlaku?

Isunya terletak pada cara React memulakan komponen kelas. Tidak seperti kelas ES5 gaya lama, komponen ES6 React tidak secara automatik mengikat kaedah kelas kepada contoh. Ini bermakna jika anda mempunyai fungsi yang ditakrifkan di dalam komponen, seperti pengendali acara, ini dalam fungsi itu tidak akan merujuk kepada komponen.

Untuk menyelesaikannya, anda perlu mengikat kaedah secara manual kepada komponen contoh dalam pembina. Begini cara anda melakukannya dalam contoh anda:

constructor (props){
  super(props);
  
  this.state = {
      loopActive: false,
      shuffleActive: false,
    };
  
  this.onToggleLoop = this.onToggleLoop.bind(this);

}

Dengan mengikat kaedah onToggleLoop kepada komponen dalam pembina, anda memastikan bahawa ini merujuk kepada komponen apabila kaedah dipanggil daripada pengendali acara. Ini membolehkan anda mengakses keadaan komponen dan prop dalam kaedah.

Ingat untuk mengikat mana-mana kaedah kelas yang memerlukan akses kepada tika komponen dalam pembina untuk mengelakkan ralat "ini tidak ditentukan".

Atas ialah kandungan terperinci Mengapa 'ini' tidak ditentukan dalam fungsi komponen React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!