Rumah >hujung hadapan web >tutorial js >Mengapa 'ini' tidak ditentukan dalam fungsi komponen React?

Mengapa 'ini' tidak ditentukan dalam fungsi komponen React?

Susan Sarandon
Susan Sarandonasal
2024-12-02 22:45:13432semak imbas

Why is

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn