Mengapa Saya Tidak Boleh Membaca Harta \'onPlayerScoreChange\' Menggunakan \'map\' dalam React?

Menyingkap Punca Ralat 'Tidak Dapat Membaca Harta' dalam Reaksi Apabila Menggunakan 'peta'

Apabila bekerja dengan React, menghadapi ralat " TypeError: Tidak boleh membaca sifat 'onPlayerScoreChange' undefined" boleh mengecewakan. Ini biasanya berlaku disebabkan oleh pengikatan fungsi yang dipersoalkan yang tidak mencukupi.

Dalam kod yang disediakan, 'onPlayerScoreChange' ialah kaedah yang dilaksanakan apabila skor pemain diubah suai. Kaedah ini berada dalam komponen Datuk Nenek. Walau bagaimanapun, peperiksaan mendedahkan kesilapan dalam mengikat 'onPlayerScoreChange' dalam fungsi 'map' komponen Induk.

Memahami Konteks 'ini'

Untuk memahami isu ini, kita mesti menyelidiki konteks 'ini' dalam fungsi JavaScript. Apabila menggunakan ungkapan 'ini' dalam fungsi biasa (fungsi bukan anak panah), nilainya akan bergantung pada cara fungsi itu dipanggil. Oleh itu, apabila melaksanakan 'this.onPlayerScoreChange' di dalam fungsi 'map', 'ini' akan merujuk kepada konteks pelaksanaan fungsi 'map', bukan konteks komponen Induk.

Menyelesaikan Isu Pengikat

Untuk menyelesaikan isu ini, kita mesti memastikan bahawa 'onPlayerScoreChange' terikat pada konteks komponen Induk supaya 'ini' merujuk kepada komponen Induk dengan sewajarnya. Ini boleh dicapai dalam dua cara:

Pilihan 1: Fungsi Anak Panah

Fungsi anak panah mewarisi konteks 'ini' daripada skop leksikal terdekatnya, menghapuskan keperluan untuk eksplisit mengikat. Dengan menggantikan fungsi biasa dalam 'peta' dengan fungsi anak panah, konteks 'ini' secara automatik akan menunjuk kepada komponen Induk:

{this.state.initialPlayers.map((player, index) => {
  return (
    <Player 
      name={player.name} 
      score={player.score} 
      key={player.id} 
      index={index}
      onScoreChange={this.onPlayerScoreChange}
    />
  )
})}

Pilihan 2: Kaedah Ikatan

Sebagai alternatif, fungsi biasa boleh diikat pada konteks komponen Induk menggunakan kaedah 'bind'. Pendekatan ini melibatkan secara eksplisit menyatakan nilai 'ini' apabila memanggil fungsi:

{this.state.initialPlayers.map(function(player, index) {
  return (
    <Player 
      name={player.name} 
      score={player.score} 
      key={player.id} 
      index={index}
      onScoreChange={this.onPlayerScoreChange}
    />
  )
}.bind(this))}

Kesimpulan

Dengan melaksanakan pengikatan fungsi yang betul, anda boleh menyelesaikan masalah " Tidak dapat membaca sifat 'onPlayerScoreChange' bagi ralat yang tidak ditentukan dalam React apabila menggunakan fungsi 'map'.

Atas ialah kandungan terperinci Mengapa Saya Tidak Boleh Membaca Harta \'onPlayerScoreChange\' Menggunakan \'map\' dalam React?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!